/* B23 presentation layer. Numerical engines and stored records remain in B22 format. */
:root{--bg:#f3f6fa;--text:#172b40;--muted:#53687d;--line:#dce5ee;--line-strong:#b5c6d7;--accent:#1267bd;--accent-soft:#eaf3fc;--radius:16px;--nav-height:76px}
body{background:var(--bg);line-height:1.55}
.app{max-width:840px;padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom) + 16px)}
main{padding:16px 16px 0}.topbar{background:transparent;border-bottom:0;padding:calc(22px + env(safe-area-inset-top)) 20px 4px;align-items:center}.topbar-title{min-width:0}.topbar h1{font-size:23px;letter-spacing:0}.topbar p{font-size:12px;overflow-wrap:anywhere}.eyebrow{font-size:10px;letter-spacing:.16em}.ver{font-size:10px;border:0;border-radius:6px;background:#e7eef6;color:#52677d}.app-state{gap:5px}#offlineStatus{font-size:11px}
.card{border-radius:var(--radius);border:1px solid var(--line);padding:20px;box-shadow:0 5px 20px #183c6605}.card h2{font-size:21px;color:#172b40}.card p{font-size:13px}.title-row{align-items:center}.badge{border-radius:7px;background:#eef4fa;color:#536b85;border:0}
button,.button{border-radius:11px;min-height:46px;font-weight:650;transition:background-color .15s,border-color .15s}button:disabled{cursor:not-allowed}button:focus-visible{outline:3px solid #51a4ef;outline-offset:3px}button.primary{background:#1267bd;border-color:#1267bd;box-shadow:0 3px 10px #1267bd1a}
input,select,textarea,.details input,.details select,.camera-field-row select,.camera-field-row textarea{font-size:16px;border-radius:10px;min-height:48px}input[readonly]{font-size:16px}input[type=checkbox],input[type=radio]{min-height:22px;width:22px;height:22px;flex-shrink:0;accent-color:var(--accent)}
label{color:#455e77}.grid2{gap:14px}.notice{border-radius:9px;padding:12px;font-size:13px}.details,.manual-coordinate-box,.result-block,.table-wrap{border-radius:12px}.details summary{min-height:32px}.subpage-head{flex-direction:column;gap:14px;margin-bottom:20px}.back-btn{min-height:44px;border-radius:10px;padding:9px 13px}.subpage-head p{line-height:1.65}.action-row,.model-toolbar{gap:10px}.empty-state{padding:28px 16px;border-radius:12px}
.bottom-nav{left:50%;right:auto;transform:translateX(-50%);width:100%;max-width:840px;padding:8px max(12px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#fff;border-top:1px solid #dce5ee;gap:8px;box-shadow:0 -6px 24px #122c4808}.nav-btn{min-height:58px;border-radius:12px;gap:4px;color:#5f7286}.bottom-nav .nav-btn b{font-size:11px}.nav-btn svg{width:23px;height:23px}.nav-btn.active{background:#eaf3fc;color:#1267bd}
/* Consistent dark field surfaces and navigation. */
body:is([data-active-page=compass],[data-active-page=track],[data-active-page=camera]){background:#0b1520;color:#edf4fa}
body:is([data-active-page=compass],[data-active-page=track],[data-active-page=camera]) .app{background:#0b1520}
body:is([data-active-page=compass],[data-active-page=track],[data-active-page=camera]) .bottom-nav{background:#101f2e;border-color:#263a4d;box-shadow:0 -8px 24px #0002}
body:is([data-active-page=compass],[data-active-page=track],[data-active-page=camera]) .nav-btn{color:#9aadc0}
body:is([data-active-page=compass],[data-active-page=track],[data-active-page=camera]) .nav-btn.active{background:#19364d;color:#79caff}
body[data-active-page=track] .topbar{display:none}
body:is([data-active-page=compass],[data-active-page=track]) main{padding:calc(16px + env(safe-area-inset-top)) 14px 0}
/* Compass: full-width coordinates retain every digit; the dial scales with its container. */
#page-compass{min-height:0}
#page-compass .compass-instrument-card.compass-final{padding:18px 16px;border-radius:20px;border-color:#263b4d;background:linear-gradient(155deg,#102234,#0b1520 65%);box-shadow:none}
.instrument-head.instrument-head-final{display:grid;grid-template-columns:minmax(0,1fr) minmax(100px,1fr);gap:12px;align-items:start}
.instrument-brand .instrument-kicker{font-size:9px;color:#79b4dc;letter-spacing:.14em}.instrument-brand h2{font-size:23px!important;margin-top:5px!important}.instrument-brand #compassSource{font-size:11px;color:#a5b7c8;white-space:normal}
.instrument-heading-top{grid-column:2;grid-row:1;text-align:right;padding-top:8px}.instrument-heading-top strong{font-size:40px;color:#bdec87}.instrument-heading-top span{font-size:12px;color:#afbed0;white-space:normal}
.top-accuracy{padding:5px 7px;margin-top:8px;gap:5px}.top-accuracy span{font-size:10px;color:#a6b8c9}.top-accuracy strong{font-size:11px}
.ambient-field-wrap{grid-column:2;grid-row:1;align-self:end;display:flex;gap:5px;align-items:center;margin-top:80px}.ambient-field-wrap .field-pill{min-width:48px;padding:3px 7px;border-color:#304a60}.ambient-field-wrap .field-pill strong{font-size:11px}.ambient-field-wrap>small{font-size:10px;color:#a2b4c6;margin:0;white-space:normal;max-width:60px;line-height:1.3}
.compass-stage.compass-stage-final{width:min(100%,410px);height:auto;aspect-ratio:1;max-width:none;max-height:none;margin:14px auto 12px}
.compass-face.compass-face-final{inset:2px;border-color:#57748e;background:radial-gradient(circle,#08121c 0 28%,#111f2c 29% 62%,#0c1824 63%)}
.compass-face-final .dial-cardinal,.compass-face-final .dial-degree{transform:translate(-50%,-50%)}
.compass-face-final .dial-n{left:50%;top:12%}.compass-face-final .dial-e{left:88%;top:50%}.compass-face-final .dial-s{left:50%;top:88%}.compass-face-final .dial-w{left:12%;top:50%}
.compass-face-final .d45{left:73%;top:27%}.compass-face-final .d135{left:73%;top:73%}.compass-face-final .d225{left:27%;top:73%}.compass-face-final .d315{left:27%;top:27%}
.compass-face-final .north-marker{left:50%;top:4%;transform:translate(-50%,-50%)}
.level-module-final .level-readout{font-size:10px;bottom:-22px;white-space:nowrap}
.engineering-readouts{grid-template-columns:1fr;gap:0;margin:8px 0 14px;border:1px solid #2b4053;border-radius:12px;background:#102030;overflow:hidden}.engineering-readouts>div{display:flex;flex-direction:row-reverse;align-items:baseline;justify-content:space-between;gap:12px;text-align:left;border-top:0;padding:8px 12px}.engineering-readouts>div+div{border-top:1px solid #24394c}.engineering-readouts span{font-size:11px;color:#a7b9cc;margin:0}.engineering-readouts strong{font-size:17px;line-height:1.4;color:#c4ed96;letter-spacing:0;overflow:visible;white-space:normal;overflow-wrap:anywhere;text-align:right}
.instrument-segmented.segmented{margin:0 0 14px;padding:4px;border-radius:12px;background:#0b1520;border-color:#30475d}.instrument-segmented button{min-height:44px;border-radius:8px;font-size:14px}
.instrument-secondary.instrument-secondary-final{gap:7px;margin-bottom:12px}.instrument-secondary-final>div{padding:9px 3px;border-radius:10px;background:#102030;border-color:#2b4053}.instrument-secondary-final span{font-size:10px;color:#adbdce}.instrument-secondary-final strong{font-size:14px;margin-top:6px}.compass-final .instrument-hint{font-size:11px;color:#9aafc3;line-height:1.65;margin-top:10px}.compass-auto-status b{font-size:11px}
/* Tool directory: one predictable row per destination, with local SVG icons. */
.tools-card{padding:18px}.tools-card .title-row{margin-bottom:20px}.tools-card .title-row p{margin-bottom:0}.tool-grid{grid-template-columns:1fr;gap:10px}.tool-entry{display:flex;align-items:center;gap:13px;min-height:82px;padding:14px;background:#fff;border-color:#e0e7ef;border-radius:13px;box-shadow:0 2px 6px #1c416504}.tool-entry:active{background:#f0f6fc}.tool-icon{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:12px;background:#eaf3fc;color:#176ab4}.tool-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.tool-copy{min-width:0;flex:1}.tool-entry .tool-copy span{font-size:15px;color:#1b3855}.tool-entry small{font-size:12px;margin-top:4px;overflow-wrap:anywhere;color:#64788c;line-height:1.45}.tool-entry em{font-size:24px;color:#8c9cad;font-style:normal}.tool-entry[data-jump=points] .tool-icon{color:#1a846c;background:#e9f6f1}.tool-entry[data-jump=report] .tool-icon{color:#8a6540;background:#f9f2e9}
/* Track: legible metadata, full-size actions, softer borders. */
#page-track{padding:0}.track-shell{border-radius:20px;border-color:#263b4d;box-shadow:none;background:#0e1c2a}.track-head{padding:20px 16px 12px}.track-kicker{font-size:10px}.track-head h2{font-size:25px;margin:4px 0}.track-head p{font-size:12px;line-height:1.6}.track-history-btn{min-height:44px;font-size:12px;white-space:nowrap;padding:8px 10px}.track-mode-grid{padding:8px 14px 18px;gap:12px}.track-mode-card{min-height:96px;border-radius:14px;padding:14px;background:#122333;border-color:#2c4357}.track-mode-card b{font-size:17px}.track-mode-card small{font-size:12px;line-height:1.6;color:#a7b8c9}.track-mode-icon{width:48px;height:48px;flex:0 0 48px}.track-home-recent{margin:0 14px 18px;border-color:#2c4357;border-radius:13px}.track-home-recent-head b{font-size:14px}.track-home-recent-head button{font-size:12px;min-height:44px}.track-recent-empty,.track-history-empty{padding:26px 14px;font-size:13px;color:#a1b5c8}.track-recent-item b,.track-history-item b{font-size:13px;overflow-wrap:anywhere}.track-recent-item small,.track-history-item small{font-size:11px;white-space:normal}.track-history-filters{flex-wrap:wrap}.track-history-filters button{font-size:12px;min-height:44px}
.track-session-back,.track-session-history{width:44px;height:44px;min-height:44px}.track-session-nav{grid-template-columns:44px minmax(0,1fr) 44px}.track-session-nav .track-mode-select{min-height:44px}.track-gps b,.track-map-state b{font-size:12px}.track-gps small,.track-map-state span{font-size:11px;color:#a4b8ca}.track-gps,.track-map-state{min-width:0;padding:10px;border-radius:12px}.track-stats>div{padding:12px 8px!important;border-radius:12px;min-height:88px}.track-stats span{font-size:12px;color:#a9bed0}.track-stats strong{font-size:24px!important}.track-stats small{font-size:11px;color:#95acc0}
.track-map-view-switch button{height:36px;min-height:36px;min-width:48px;font-size:11px}.track-map-topline>span#trackMapNetwork{font-size:10px!important}.track-map-tool{width:44px;height:44px;min-height:44px}.track-map-tools{top:60px}.track-map-empty{max-width:80%;width:max-content}.track-map-empty span{font-size:12px}.track-map-badge{bottom:22px}.track-map-badge span{font-size:10px}.track-map-attribution{font-size:9px}.track-assist-actions button{min-height:46px!important;font-size:13px}.track-primary-actions button{min-height:52px!important;font-size:16px}.track-notice{font-size:12px;line-height:1.65;color:#9db2c5;text-align:left;margin:12px 3px 0!important}.track-secondary-stats span{font-size:11px}.track-secondary-stats b{font-size:13px}.track-detail-bar small{font-size:11px}.track-detail-bar b{font-size:14px;overflow-wrap:anywhere}.track-action-dialog p{font-size:14px}.track-action-input{font-size:16px}
/* Camera: reserve the real navigation height; avoid the previous fixed 510px preview. */
body[data-active-page=camera] .app{max-width:840px;padding-bottom:0}body[data-active-page=camera] main{padding:0 0 calc(var(--nav-height) + env(safe-area-inset-bottom))}#page-camera,.camera-shell{min-height:0}.camera-live-panel{height:calc(100svh - var(--nav-height) - env(safe-area-inset-bottom));min-height:0}.camera-viewfinder{min-height:220px;flex:1}.camera-capture-bar{flex-shrink:0;grid-template-columns:1fr 100px 1fr;padding:12px 16px;background:#0b1520;border-color:#27394b}.camera-shutter{width:72px;height:72px;min-height:72px}.camera-shutter span{width:58px;height:58px}.camera-side-action,.camera-side-action b{font-size:12px}.camera-top-controls{padding-left:12px;padding-right:12px}.camera-icon-btn,.camera-back-btn{width:44px;height:44px;min-height:44px}.camera-pill-btn{min-height:44px;font-size:12px;padding:7px 10px}.camera-top-actions,.camera-top-left{gap:6px}.camera-location-badge{font-size:11px;top:calc(68px + env(safe-area-inset-top));left:12px}.camera-track-badge{font-size:10px;top:calc(103px + env(safe-area-inset-top));left:12px;right:auto}
.camera-watermark-preview{max-width:calc(100% - 28px);padding:9px 10px;border-radius:10px}.wm-line,.template-simple .wm-line{font-size:10px;line-height:1.55}.wm-brand{font-size:12px}.camera-watermark-preview.position-top-left,.camera-watermark-preview.position-top-right{top:calc(140px + env(safe-area-inset-top))}.camera-watermark-preview.size-large{max-width:calc((100% - 28px)/1.12)}
.camera-settings-sheet{border-radius:24px 24px 0 0;max-height:calc(100svh - env(safe-area-inset-top) - 12px)}.camera-sheet-head{padding:12px 16px}.camera-sheet-head button{font-size:14px;min-height:44px}.camera-settings-scroll{max-height:calc(100svh - env(safe-area-inset-top) - 84px);overscroll-behavior:contain;padding-left:16px;padding-right:16px}.camera-setting-section{padding:18px 0}.camera-setting-section h4{font-size:12px;color:#a9bed0}.camera-radio-row b{font-size:14px}.camera-radio-row small{font-size:12px;color:#a0b6c9;line-height:1.5}.camera-toggle-row{font-size:13px;gap:12px;min-height:50px}.camera-field-row{grid-template-columns:66px minmax(0,1fr)}.camera-field-row span{font-size:12px}.camera-choice-grid button{min-height:46px;font-size:13px}.camera-radio-row,.camera-toggle-row{padding:10px 12px}.camera-toggle-row input{accent-color:#62df83}
.camera-confirm-meta span,.camera-confirm-meta b{font-size:12px}.camera-confirm-meta button{min-height:48px;grid-template-columns:76px minmax(0,1fr) 16px}.camera-confirm-actions button{font-size:13px;min-height:48px;padding:10px 5px}.camera-confirm-hint{font-size:12px;color:#a2b6c8;line-height:1.6}.camera-confirm-head span{font-size:11px}.camera-gallery-head p{font-size:12px}.camera-gallery-copy b{font-size:12px}.camera-gallery-copy small{font-size:11px}.camera-gallery-item{grid-template-columns:64px minmax(0,1fr) 48px 48px;gap:6px}.camera-gallery-photo{width:64px;height:64px}.camera-gallery-item button{min-height:44px;font-size:12px}.camera-gallery-empty{font-size:14px}
@media(min-width:620px){.tool-grid{grid-template-columns:1fr 1fr}.tool-entry:last-child{grid-column:1/-1}.track-mode-grid{grid-template-columns:1fr 1fr}.engineering-readouts{max-width:550px;margin-left:auto;margin-right:auto}.instrument-head-final{max-width:550px;margin:auto}}
@media(max-width:360px){main{padding-left:10px;padding-right:10px}.card{padding:15px}.topbar{padding-left:15px;padding-right:15px}.topbar h1{font-size:20px}.ver{font-size:9px}.grid2:not(.compact-grid){grid-template-columns:1fr}.instrument-secondary.instrument-secondary-final{grid-template-columns:1fr 1fr}.instrument-secondary-final span{font-size:11px}.instrument-heading-top strong{font-size:35px}.engineering-readouts strong{font-size:15px}.camera-top-actions{gap:4px}.camera-icon-btn,.camera-back-btn{width:40px;min-width:40px}.camera-pill-btn{padding-left:7px;padding-right:7px}.camera-pill-btn b{font-size:11px}.camera-gallery-item{grid-template-columns:52px minmax(0,1fr) 44px 44px}.camera-gallery-photo{width:52px;height:60px}.wm-line{font-size:9px}}
@media(max-height:540px) and (orientation:landscape){.camera-live-panel{height:auto;min-height:440px}.camera-viewfinder{min-height:320px}}
@media(prefers-reduced-motion:reduce){button,.button{transition:none}}
body.dialog-open{overflow:hidden}.track-action-dialog{max-height:calc(100svh - 32px);overflow:auto;overscroll-behavior:contain}
.track-mode-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.track-mode-card[data-track-mode=work] .track-mode-icon{color:#6dc3ff}.track-mode-card[data-track-mode=walk] .track-mode-icon{color:#7bdd93}.track-mode-card[data-track-mode=run] .track-mode-icon{color:#ffb67c}.track-mode-card[data-track-mode=bike] .track-mode-icon{color:#c5a0fa}
@media(min-width:620px){.track-mode-grid{display:grid}}
.track-map-card{height:clamp(240px,calc(100svh - 564px),355px)!important}
.track-mode-card small{font-weight:400}

/* B24: consistent centered magnetic parameter cards. */
.instrument-secondary.instrument-secondary-final>div{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:68px;text-align:center;padding:10px 4px}
.instrument-secondary-final>div>span,.instrument-secondary-final>div>strong{width:100%;text-align:center}
.instrument-secondary-final>div>span{line-height:1.4}
.instrument-secondary-final>div>strong{margin-top:7px;line-height:1.4;font-variant-numeric:tabular-nums}

/* B25: visible location recovery and map gestures */
.home-location-controls{display:flex;align-items:center;gap:12px;margin:12px 0 16px;text-align:left}
.home-location-controls button{flex:0 0 auto;min-height:44px;padding:8px 14px;font-size:13px;border:1px solid #38546a;border-radius:12px;background:#162b3c;color:#8dd2ff}
.home-location-controls p{margin:0;font-size:11px;line-height:1.65;color:#9eb4c5;overflow-wrap:anywhere}
.home-location-controls p[data-state=error]{color:#ffb0a8}.home-location-controls p[data-state=ok]{color:#8ddcae}
.track-step-notice{margin:10px 3px 0;font-size:12px;line-height:1.65;color:#a9bdcf}
.track-step-permission{margin-top:8px;min-height:44px;font-size:13px}
#trackCanvas{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
#trackCanvas:active{cursor:grabbing}
.track-map-topline,.track-map-north,.track-map-empty,.track-map-badge,.track-map-attribution{pointer-events:none}
.track-map-view-switch{pointer-events:auto}
.track-map-card{height:clamp(290px,calc(100svh - 564px),355px)!important}
.track-map-gesture-hint{margin:6px 2px 0;text-align:center;font-size:11px;color:#92acc0}
#trackMapZoomIn,#trackMapZoomOut{font-size:23px;line-height:1}