.distance-main{padding-block:22px 64px}.distance-layout{display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:28px;align-items:start}.distance-primary{min-width:0}.distance-input-panel{position:relative;z-index:2;overflow:visible;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 28px;box-shadow:var(--shadow-sm)}
.distance-tool-heading{display:flex;align-items:center;gap:16px}.distance-tool-art{display:grid;place-items:center;width:74px;height:74px;background:var(--accent-soft);border-radius:var(--radius-lg);flex-shrink:0}.distance-tool-art svg{width:60px;height:60px}.distance-eyebrow{color:#ba293c;font-size:var(--text-sm);font-weight:var(--weight-semibold)}.distance-tool-heading h1{font-size:var(--text-2xl);line-height:1.7}
.distance-form{margin-top:22px}.distance-page .distance-form-hint{font-size:var(--text-base);font-weight:var(--weight-medium);margin:0 0 14px}.distance-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.distance-field{min-width:0}.distance-field>label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--muted)}.distance-select,.distance-page .distance-picker-input{display:block;width:100%;margin-top:7px;padding:12px 14px;border:1px solid #d6dde7;border-radius:var(--radius-md);background:#fafbfd;color:var(--ink);font:inherit;font-size:var(--text-base);min-height:50px}.distance-form .solid-button{justify-content:center;margin-top:18px;min-height:50px;font-size:var(--text-base)}.distance-form .solid-button .icon{margin-inline-start:8px}.distance-form #distance-error{background:#fff0f2;color:#aa2436;padding:8px 12px;border-radius:var(--radius-sm);margin-top:12px;font-size:var(--text-sm)}
.distance-picker{position:relative}.distance-picker:has([aria-expanded=true]){z-index:1}.distance-page .distance-picker-input{padding-inline-end:36px;cursor:pointer;height:52px;line-height:normal}.distance-picker:after{content:'';position:absolute;inset-inline-end:16px;top:21px;width:7px;height:7px;border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);transform:rotate(45deg);pointer-events:none}.distance-picker-input:focus{outline:3px solid #fce2e8;outline-offset:1px;border-color:#e77d90;cursor:text}.distance-picker-options{position:absolute;inset-inline:0;top:calc(100% + 5px);z-index:25;background:#fff;border:1px solid #d6dde7;border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:6px;max-height:238px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.distance-picker-option{display:block;padding:9px 12px;border-radius:var(--radius-sm);font-size:var(--text-base);cursor:pointer}.distance-picker-option:hover,.distance-picker-option[aria-selected=true]{background:#fff0f3;color:#b42c43}.distance-picker-option.is-focused{background:#edf2fa;outline:1px solid #c7d7ed}.distance-picker-empty{padding:12px;color:var(--muted);font-size:var(--text-sm)}
.distance-page .distance-results{display:grid;gap:22px;margin-top:24px;outline:none}.distance-results>header,.distance-results>section,.distance-section{border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;background:var(--surface);min-width:0;box-shadow:var(--shadow-sm)}.distance-results h2,.distance-section h2{font-size:var(--text-xl);line-height:1.7}.distance-results .distance-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.72fr);gap:20px;background:#fff;border-color:var(--line)}.distance-summary>div{min-width:0}.distance-answer-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-block:16px}.distance-answer-values>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#ffe4e9;border:1px solid #f7cdd5;border-radius:var(--radius-md);padding:11px 8px;text-align:center;min-width:0}.distance-answer-values>div:nth-child(2){background:#e7e4ff;border-color:#dcd5f7}.distance-answer-values>div:nth-child(3){background:#dff4eb;border-color:#c5e7d9}.distance-answer-values dt,.distance-answer-values dd>span{font-size:var(--text-sm)}.distance-answer-values dd{margin:0;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;justify-content:center}.distance-answer-values strong{font-size:var(--text-2xl);font-weight:var(--weight-bold);color:#b42c43;}.distance-answer-values>div:nth-child(2) strong{color:#6c4bb5}.distance-answer-values>div:nth-child(3) strong{color:#237359}.distance-time-highlight{background:#fff1d8;border:1px solid #f3e2c0;border-radius:var(--radius-md);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:18px;gap:7px}.distance-time-highlight>span{font-size:var(--text-sm);color:#7d622c}.distance-time-highlight>strong{color:#805715;font-size:var(--text-2xl);font-weight:var(--weight-bold)}.distance-time-highlight small{font-size:var(--text-sm);color:#725d37}.distance-page .distance-note{color:var(--muted);font-size:var(--text-sm);line-height:1.9;margin-top:14px}.distance-sea-notice{grid-column:1/-1;background:#fff4e9;color:#79562c;padding:14px 17px;border-radius:var(--radius-md);font-size:var(--text-sm);line-height:1.95}.distance-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}.distance-page .distance-actions button,.distance-actions a{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:8px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:var(--text-sm);transition:border-color .2s,transform .2s}.distance-actions .icon{width:18px;height:18px}.distance-actions button:hover,.distance-actions a:hover{border-color:#ec9daa;transform:translateY(-2px)}
.distance-section-heading{display:flex;align-items:center;gap:11px;margin-bottom:18px}.distance-section-icon{width:40px;height:40px;display:inline-grid;place-items:center;flex-shrink:0;border-radius:var(--radius-md);background:#e6eefc;color:#466fad}.distance-section-icon .icon{width:22px;height:22px}.distance-section-icon--lilac{background:#eee7fa;color:#8061af}.distance-section-icon--mint{background:#e0f3ea;color:#25755c}.distance-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.distance-facts>div{display:flex;flex-direction:column;align-items:flex-start;gap:5px;border-radius:var(--radius-md);background:#f3f6fb;padding:14px 17px;min-width:0}.distance-facts>div:nth-child(2){background:#edf6f1}.distance-facts>div:nth-child(3){background:#fff4e9}.distance-facts>div:nth-child(4){background:#f3eefb}.distance-facts span,.distance-time-values span{color:var(--muted);font-size:var(--text-sm)}.distance-facts strong{font-size:var(--text-base)}.distance-time-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.distance-time-values>div{display:flex;flex-direction:column;gap:8px;border:1px solid #ddeee4;border-radius:var(--radius-md);padding:16px 12px;text-align:center;background:#edf7f2}.distance-time-values>div:nth-child(2){background:#f1f5fc;border-color:#e2e9f4}.distance-time-values>div:nth-child(3){background:#f3eefb;border-color:#e5ddf4}.distance-time-values strong{color:#246e58;font-size:var(--text-xl);}.distance-time-values>div:nth-child(2) strong{color:#46699d}.distance-time-values>div:nth-child(3) strong{color:#715298}
.distance-map-canvas{height:360px;width:100%;border:1px solid var(--line);border-radius:var(--radius-md);background:#edf2f7;isolation:isolate;z-index:0}.distance-map-canvas .leaflet-control-attribution,.distance-map-canvas .leaflet-tooltip,.distance-map-canvas .leaflet-control-scale-line{font-family:inherit;font-size:var(--text-sm);line-height:1.7}.distance-map-legend{display:flex;flex-wrap:wrap;gap:12px 24px;margin-bottom:14px;font-size:var(--text-sm)}.distance-map-legend>span{display:flex;align-items:center;gap:8px}.distance-map-legend i{width:10px;height:10px;border-radius:50%;background:#c43b42}.distance-map-legend>span:nth-child(2) i{background:#2474d2}
.distance-ready{display:flex;justify-content:center;gap:40px;padding:30px;color:#b4becd}.distance-ready>span{background:#e9edf3;border-radius:var(--radius-lg);padding:15px;transform:rotate(-5deg)}.distance-ready>span:nth-child(2){transform:translateY(12px) rotate(6deg)}.distance-ready .icon{width:27px;height:27px}.distance-page details>summary{cursor:pointer;list-style:none}.distance-page details>summary::-webkit-details-marker{display:none}.distance-support{margin-top:24px}.distance-page [hidden]{display:none!important}.distance-page .d-none{display:none!important}.distance-page #distance-result,.distance-page #distance-times,.distance-page #distance-map,.distance-page #distance-comments{scroll-margin-top:20px}
@media(max-width:1100px){.distance-layout{grid-template-columns:minmax(0,1fr) 250px;gap:20px}.distance-input-panel{padding:22px}.distance-results .distance-summary{grid-template-columns:1fr}.distance-time-highlight{align-items:flex-start;text-align:right}.distance-time-highlight>strong{font-size:var(--text-xl)}}
@media(max-width:850px){.distance-layout{grid-template-columns:minmax(0,1fr)}.distance-tool-heading h1{font-size:var(--text-xl)}}
@media(max-width:599px){.distance-main{padding-block:16px 36px}.distance-tool-heading{gap:12px}.distance-tool-art{width:55px;height:55px;border-radius:var(--radius-md)}.distance-tool-art svg{width:48px;height:48px}.distance-tool-heading h1{font-size:var(--text-lg)}.distance-input-panel{padding:20px 16px}.distance-form{margin-top:18px}.distance-fields{gap:8px}.distance-select,.distance-page .distance-picker-input{font-size:var(--text-sm);min-height:48px;padding:11px 10px}.distance-page .distance-picker-input{padding-inline-end:30px;height:48px}.distance-picker:after{inset-inline-end:12px}.distance-results{gap:16px;margin-top:18px}.distance-results>header,.distance-results>section,.distance-section{padding:19px 16px}.distance-results .distance-summary{grid-template-columns:1fr;gap:16px}.distance-results h2,.distance-section h2{font-size:var(--text-lg)}.distance-answer-values{margin-block:14px;gap:9px}.distance-answer-values>div{padding:12px 6px;gap:7px}.distance-time-highlight{align-items:flex-start;text-align:right;padding:16px;gap:4px}.distance-actions{gap:8px}.distance-page .distance-actions button,.distance-actions a{padding:8px 9px;flex:0 1 auto}.distance-section-heading{margin-bottom:14px;gap:9px}.distance-section-icon{width:35px;height:35px}.distance-section-icon .icon{width:20px;height:20px}.distance-facts{gap:9px}.distance-facts>div{padding:12px}.distance-facts strong{font-size:var(--text-sm)}.distance-time-values{grid-template-columns:1fr;gap:9px}.distance-time-values>div{flex-direction:row;justify-content:space-between;align-items:center;text-align:right;gap:10px;padding:12px}.distance-time-values strong{font-size:var(--text-lg);flex-shrink:0}.distance-map-canvas{height:300px}.distance-ready{gap:24px;padding:24px}.distance-ready>span{padding:12px}}
@media(width < 420px){.vm-next .tool-card-grid.distance-answer-values>div{grid-column:span 3}.vm-next .tool-card-grid.distance-answer-values>div:last-child{grid-column:1/-1}}
@media(prefers-reduced-motion:no-preference){.distance-input-panel,.distance-summary{animation:distance-enter .35s ease-out backwards}.distance-summary{animation-delay:.08s}@keyframes distance-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}

.distance-answer-values.tool-card-grid,.distance-time-values.tool-card-grid{--tool-card-align:center}.distance-answer-values.tool-card-grid{--tool-card-gap:var(--tool-space-card)}.distance-answer-values dd{min-width:0;max-width:100%;overflow-wrap:anywhere}.distance-time-highlight>strong{max-width:100%;overflow-wrap:anywhere}@media(max-width:599px){.distance-page .tool-card-grid{--tool-card-gap:var(--tool-space-card)}.vm-next .distance-time-values.tool-card-grid[data-card-rows]>div{grid-template-columns:repeat(2,minmax(0,1fr));grid-row:span 1;grid-template-rows:auto;align-items:center;justify-items:stretch}.distance-time-values.tool-card-grid strong{max-width:100%;white-space:normal}}

.distance-page .distance-form{margin-top:var(--tool-space-section)}.distance-page .distance-form .solid-button{margin-top:var(--tool-space-content)}.distance-page .distance-fields{gap:var(--tool-space-card)}.distance-page .distance-select,.distance-page .distance-picker-input{margin-top:var(--tool-space-inline)}.distance-page .distance-results{gap:var(--tool-space-section)}.distance-page .distance-results .distance-summary{gap:var(--tool-space-content)}.distance-page .distance-tool-heading{gap:var(--tool-space-content)}.distance-page .distance-section-heading{gap:var(--tool-space-card);margin-bottom:var(--tool-space-content)}.distance-page .distance-note{margin-top:var(--tool-space-content)}.distance-page .distance-answer-values{margin-block:var(--tool-space-content)}.distance-page .distance-time-highlight{gap:var(--tool-space-inline)}.distance-page .distance-map-legend{gap:var(--tool-space-inline) var(--tool-space-section);margin-bottom:var(--tool-space-content)}

.distance-page .distance-form-hint{margin:0 0 var(--tool-space-content)}