.route-recorder{max-width:1000px;margin-inline:auto}.recording-toolbar{justify-content:space-between;align-items:center;gap:12px;padding:12px 0 18px;display:flex}.recording-toolbar h1{font:600 24px/1.2 var(--font-display);text-align:center;margin:0}.recording-toolbar small{text-align:center;font:400 11px/1.5 var(--font-sans);color:var(--brand-mist);display:block}.recording-info-button,.recording-toolbar .sailor-back{width:44px;height:44px;color:var(--brand-fjord);cursor:pointer;background:0 0;border:0;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}.recording-footnote{color:var(--brand-mist);text-align:center;font:400 11px/1.4 var(--font-sans);margin:0;padding:0 16px 14px}.route-recorder .recording-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.recording-info-dialog{border:1px solid var(--brand-sand);background:var(--brand-foam);width:min(480px,100vw - 24px);max-height:calc(100dvh - 40px);color:var(--brand-fjord);border-radius:20px;padding:20px;overflow:auto}.recording-info-dialog::backdrop{background:#0000004d}.recording-dialog-heading{justify-content:space-between;align-items:center;display:flex}.recording-dialog-heading h2{font:600 24px/1.2 var(--font-display)}.recording-info-dialog .recording-notes{padding:0}.recording-location-feedback{background:var(--brand-sea-glass);font:400 13px/1.6 var(--font-sans);padding:12px 22px}.recording-location-feedback p{margin:4px 0}.route-recorder .sailor-intro{padding:22px 0}.route-recorder h1{font-size:clamp(30px,4vw,44px)}.recording-panel{border:1px solid var(--brand-sand);background:#fff;border-radius:20px;overflow:hidden}.recording-status{font:600 13px/1.5 var(--font-sans);flex-wrap:wrap;justify-content:space-between;gap:12px;padding:17px 22px;display:flex}.recording-status span{align-items:center;gap:8px;display:inline-flex}.recording-status span:last-child{color:var(--brand-mist)}.recording-map{margin:0;position:relative}.recording-map-canvas{background:var(--brand-sea-glass);z-index:0;width:100%;height:clamp(220px,32vh,380px)}.recording-map figcaption{font:400 12px/1.6 var(--font-sans);color:var(--brand-mist);padding:10px 20px}.recording-map-tools{z-index:1;gap:8px;display:flex;position:absolute;top:12px;right:12px}.recording-map-tools .sailor-button{background:var(--brand-foam);padding:9px 12px;font-size:12px}.recording-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:22px;display:grid}.recording-metrics dt{color:var(--brand-mist);font:500 12px/1.5 var(--font-sans)}.recording-metrics dd{font:600 clamp(22px, 3vw, 36px)/1.2 var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:-.035em;margin:6px 0 0}.recording-metrics small{font:500 12px/1.5 var(--font-sans);letter-spacing:0}.recording-controls{flex-wrap:wrap;justify-content:center;gap:12px;padding:5px 22px 22px;display:flex}.recording-controls .sailor-button{min-width:145px;min-height:48px}.recording-notes{font:400 12px/1.7 var(--font-sans);color:var(--brand-mist);padding:0 22px 18px}.recording-notes p{margin:7px 0}.recording-footer{flex-wrap:wrap;gap:12px;margin-block:24px;display:flex}.route-recorder .sailor-editor{margin-top:24px}.recorded-trip{border:1px solid var(--brand-sand);border-radius:16px;margin:24px 0;overflow:hidden}.recorded-trip>h2,.recorded-trip>p,.recorded-trip>label,.recorded-trip>button{margin:18px 22px}.recorded-trip>label{font:400 13px/1.6 var(--font-sans);align-items:flex-start;gap:10px;display:flex}.recorded-trip input{width:20px;height:20px;accent-color:var(--brand-fjord);flex-shrink:0}.route-recorder .sailor-button:active{transform:scale(.98)}:is(.route-recorder :focus-visible,.recorded-trip :focus-visible){outline:3px solid var(--brand-signal);outline-offset:3px}@media (max-width:560px){.recording-metrics{gap:12px;padding:18px 14px}.recording-metrics dt{font-size:10px}.recording-metrics dd{font-size:22px}.recording-controls{padding-inline:14px}.recording-controls .sailor-button{flex:1;min-width:0}.recording-map-tools{flex-direction:column}}@media (prefers-reduced-motion:reduce){.route-recorder .sailor-button{transition:none;transform:none}}@media (max-width:800px){.sailor-recording-page>.sailor-header,.sailor-recording-page .sailor-sidebar{display:none}.sailor-recording-page .sailor-home-layout{display:block}.sailor-recording-page .sailor-home-layout .sailor-workspace{max-width:none;margin:0;padding:0}.route-recorder{padding:0 12px max(10px, env(safe-area-inset-bottom))}.route-recorder:not(.is-composing){box-sizing:border-box;flex-direction:column;height:100dvh;display:flex}.recording-toolbar{padding:max(6px, env(safe-area-inset-top)) 0 6px;flex:none}.recording-toolbar h1{font-size:20px}.route-recorder:not(.is-composing) .recording-panel{flex-direction:column;flex:1;min-height:0;display:flex}.route-recorder .recording-status{flex-wrap:nowrap;gap:8px;padding:10px 12px;font-size:11px}.route-recorder .recording-status span:last-child{flex-shrink:0}.route-recorder .recording-location-feedback{padding:6px 12px;font-size:11px}.route-recorder:not(.is-composing) .recording-map{flex-direction:column;flex:1;min-height:100px;display:flex}.route-recorder:not(.is-composing) .recording-map-canvas{flex:1;height:100%;min-height:100px}.route-recorder .recording-map figcaption{display:none}.route-recorder .recording-metrics{flex-shrink:0;grid-template-columns:1.2fr 1fr;gap:12px 18px;padding:12px 16px}.route-recorder .recording-metrics dt{font-size:11px}.route-recorder .recording-metrics dd{margin-top:3px;font-size:27px}.route-recorder .recording-time dd{font-size:32px}.route-recorder .recording-controls{flex-shrink:0;gap:10px;padding:0 12px 10px}.route-recorder .recording-controls .sailor-button{min-height:48px}.route-recorder:not(.is-composing)>.sailor-error{z-index:10;background:var(--brand-foam);max-height:25dvh;padding:12px;position:fixed;top:65px;left:20px;right:20px;overflow:auto}}@media (max-width:800px) and (max-height:550px){.route-recorder .recording-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.route-recorder .recording-metrics dd,.route-recorder .recording-time dd{font-size:21px}.route-recorder .recording-status{padding-block:6px}}.route-recorder [hidden]{display:none!important}.route-recorder.is-composing{max-width:640px}.route-recorder .recording-composer{margin:0;padding:0;overflow:hidden}.recording-compose-body{padding:20px}.recording-compose-body h2{margin-top:0}.recording-compose-actions{padding:14px 20px max(14px, env(safe-area-inset-bottom));border-top:1px solid var(--brand-sand);background:var(--brand-foam)}.recording-compose-actions .sailor-button{width:100%;min-height:48px}@media (max-width:800px){.route-recorder.is-composing{flex-direction:column;height:100dvh;padding-bottom:0;display:flex}.route-recorder .recording-composer{border-radius:16px 16px 0 0;flex-direction:column;flex:1;min-height:0;display:flex}.recording-compose-body{overscroll-behavior:contain;flex:1;min-height:0;padding:18px 16px;scroll-padding-block:18px;overflow-y:auto}.recording-compose-actions{flex-shrink:0;padding-inline:16px}}