/* Product finish: one icon system, readable instruments and consistent states. */
:root{--bg:#060c12;--panel:#10202c;--line:#304653;--text:#f5f8fc;--muted:#c1cfdc;--accent:#ffcb47;--blue:#62bfff;--green:#52dda2}
body{font-family:'Segoe UI Variable Text','Segoe UI',Arial,sans-serif;background:radial-gradient(ellipse at 45% 0,#152d3c 0,transparent 55%),#060c12}
.icon-library{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}.ui-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}
button{transition:background-color .15s,border-color .15s,box-shadow .15s; -webkit-tap-highlight-color:transparent}button:hover{filter:none}button:active{filter:brightness(.9)}button:disabled{cursor:not-allowed;opacity:.55}button:focus-visible{outline:3px solid #8ad1ff;outline-offset:-3px}
.app{padding:8px;gap:8px}.topbar{background:linear-gradient(110deg,#132733,#0c1822);border-color:#38515f;box-shadow:inset 0 1px #ffffff08}.identity>img{width:48px;height:36px}.identity{gap:11px}.product-name{display:block;color:#adc1d0;letter-spacing:2px;font-size:10px;font-weight:700;line-height:1.1;margin-bottom:3px}.product-name>span{color:#ffcf59}.topbar h1{font-size:23px;font-weight:650;letter-spacing:-.5px;line-height:1.1;max-width:36vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.connection{padding:0 8px;min-height:44px;border-radius:6px;font-size:14px;color:#d1e0eb}.connection:hover{background:#243c4b}.connection:before{content:none}.connection>.ui-icon{width:18px;color:#95b7cd;margin-left:5px}.demo-tag{font-size:11px;letter-spacing:1px;padding:4px 6px;color:#ffda81;background:#5d471c55;border:1px solid #987b39;border-radius:4px;margin-right:7px;font-weight:650}.status-dot{box-shadow:0 0 0 3px #52dda211;width:7px;height:7px}time{font-variant-numeric:tabular-nums;color:#dce8f2}.icon-button{display:inline-grid;place-items:center;border-radius:6px}.icon-button:hover{background:#2d465880}.icon-button .ui-icon{width:21px;height:21px}
.panel{background:linear-gradient(155deg,#142633,#0c1923);border-color:#344b5a;border-radius:9px;box-shadow:inset 0 1px #ffffff05,0 2px 8px #0002}.panel-heading{border-bottom:1px solid #35505c80;background:#0a172233}.panel-heading h2{font-weight:600;letter-spacing:-.2px}.panel-heading h2>.ui-icon{width:19px;height:19px;color:#c0d7e7}.panel-heading .text-button{color:#b7d9ef}.panel-heading .text-button:hover{color:white}.panel-heading .sample{font-size:10px;letter-spacing:1px;color:#a9bdcb}.rtk{font-size:11px;letter-spacing:.7px;background:#123e31;border:1px solid #2e6a53;border-radius:4px;padding:4px 6px;color:#80e6b5}.camera{border-color:#425b6b}.camera-bottom{background:linear-gradient(transparent,#08111abf 30%,#08111af2);padding-top:32px}.camera-selector{border:1px solid #64849777;background:#081522e6;border-radius:8px;gap:3px;padding:3px}.camera-selector button{background:transparent;border:1px solid transparent;font-weight:600}.camera-selector button:hover{background:#233c4f}.camera-selector button[aria-pressed=true]{background:linear-gradient(#246594,#174c75);border-color:#6eb9ea;box-shadow:inset 0 1px #ffffff25}.speed strong{font-weight:650;letter-spacing:-1.1px;font-variant-numeric:tabular-nums}.speed small{color:#cad7e2;letter-spacing:.7px;font-size:10px}.camera-tools{display:none}.inset{color:#e0ebf4!important;background:#0b1624c9}.camera-unavailable{display:none}.disconnected .camera-unavailable{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;background:radial-gradient(ellipse,#203342,#0c1721);text-align:center;padding:12px}.camera-unavailable>.ui-icon{width:35px;height:35px;color:#91aabf}.camera-unavailable strong{font-size:19px}.camera-unavailable span{font-size:14px;color:var(--muted)}.camera-unavailable button{min-height:44px;border:1px solid #62889f;background:#213d50;border-radius:5px;padding:5px 14px;font-size:15px;margin-top:5px}.disconnected .camera-photo{opacity:0}.disconnected .camera-top,.disconnected .camera-bottom,.disconnected .inset{visibility:hidden}.secondary-camera .camera-unavailable span,.secondary-camera .camera-unavailable button{display:none}.secondary-camera .camera-unavailable strong{font-size:16px}.disconnected .connection .status-dot{background:#ffa65d;box-shadow:0 0 0 3px #ffae5d15}.disconnected #connectionLabel{color:#ffd4a0}.demo-paused:not(.disconnected) .connection .status-dot{background:#ffcb47}.disconnected .meter i{width:0!important}.disconnected .location-body>div>span,.disconnected .location-body>img{visibility:hidden}.disconnected .location-body{position:relative}.disconnected .location-body:before{content:'No location signal';position:absolute;top:15px;left:12px;font-size:17px;color:#f4d4a8}.disconnected #elevation{font-size:13px}.disconnected #fixState{background:#503419;color:#ffd8a3;border-color:#916d3d}.disconnected .instrument{opacity:.25}.disconnected .control-grid button[aria-pressed=true]{background:#192c39;border:1px solid #527184;color:#b7c9d5}.disconnected .control-grid small{font-size:10px;color:#cfdae3!important}.disconnected .activity-row .good{color:#ffbd65}.disconnected #systemTitle{color:#ffcd86}.no-value{color:#91a9bb}
.instrument{height:70px;width:100%;max-width:144px;margin:0 auto 1px}.instrument>svg{width:100%;height:100%;overflow:visible}.attitude-body{transform-origin:80px 73px;transition:transform .3s}.level-item>strong{font-family:'Bahnschrift','Segoe UI',Arial,sans-serif;font-weight:600;font-size:34px;letter-spacing:-1px;line-height:1.1}.level-item>span{margin-top:3px;font-weight:500}.level-item small{color:#b6c9d8}.gauges{padding:6px 9px;gap:10px}.position-body dd{font-family:'Bahnschrift','Segoe UI',Arial,sans-serif;font-size:25px;font-weight:600;letter-spacing:-.4px}.position-body dt{color:#c2d3e0}.position-body>img{filter:drop-shadow(0 4px 5px #0003)}.location-body>img{border:1px solid #5c737f;filter:saturate(.8)}.location-body span{color:#dfebf5}.location:hover,.attachment:hover{border-color:#72a5c4;background:linear-gradient(155deg,#1b3546,#0f2330)}.chevron{display:flex;align-items:center}.chevron .ui-icon{width:18px;height:18px}
.metric{text-align:left;position:relative}.metric:hover{border-color:#6d9eba;background:linear-gradient(155deg,#1a3344,#102330)}.metric:after{content:'↗';position:absolute;right:9px;top:8px;color:#89a8bc;font-size:13px;opacity:0;transition:opacity .15s}.metric:hover:after,.metric:focus-visible:after{opacity:1}.metric-label{color:#d2e1ed;font-weight:500}.metric-label>.ui-icon{width:18px;height:18px;color:#b0c8d9}.reading{font-family:'Bahnschrift','Segoe UI',Arial,sans-serif;font-weight:600;letter-spacing:-1px;font-size:36px;line-height:1.05}.reading small{font-family:'Segoe UI',Arial,sans-serif;font-size:16px;color:#b6ccdc}.meter{height:5px;border:0;background:#3c5260;border-radius:4px}.meter i{background:linear-gradient(90deg,#51bcb5,#68e1b7);transition:width .3s}.meter.fuel i{background:linear-gradient(90deg,#da9a25,#ffd660)}.attachment-art{display:grid;place-items:center;width:45px;height:51px;flex-shrink:0;color:#acc2d2}.attachment-art>.ui-icon{width:42px;height:42px;stroke-width:1.1}.attachment strong{font-weight:600;font-size:16px;letter-spacing:-.2px}.attachment small{color:#b7cbdc}.attachment .metric-label{color:#a6bece}.service-warning{background:linear-gradient(110deg,#493819,#322a1b);border-color:#af8531;box-shadow:inset 3px 0 var(--accent);color:#ffe094}.service-warning:hover{background:#534122;border-color:var(--accent)}.service-warning strong{font-weight:600}.service-warning small{color:#e7d5ae}.service-warning .activity-symbol{border:0;border-radius:0;font-size:21px}.service-row{color:#d8e7f1}.service-row:hover{background:#1b3546}.service-row small{color:#b2c9d8}.activity-row strong{font-weight:500}.activity-row small{color:#b5c7d4}.activity-row:hover[data-action]{background:#1b3344}.activity-symbol{border-width:1.5px;width:22px;height:22px}.control-grid button{background:linear-gradient(160deg,#203747,#142735);border-color:#486575;box-shadow:inset 0 1px #ffffff09;font-weight:500}.control-grid button:hover{border-color:#9db5c5}.control-grid button[aria-pressed=true]{background:linear-gradient(160deg,#4b3c1b,#292718);border:1px solid #e8b943;box-shadow:inset 0 0 0 1px #e8b94333;color:#ffe299}.control-grid small{color:#b7cedc;font-size:11px;letter-spacing:1px}.control-grid button[aria-pressed=true] small:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:5px;vertical-align:2px}.control-icon svg{stroke-width:1.5}
.navigation{gap:8px}.tabs>button,.settings-button{display:flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(#1a2d3b,#11232f);border-color:#3e596a;font-weight:500;position:relative}.tabs>button:hover,.settings-button:hover{background:#233f52;border-color:#698da5}.tabs>button.selected{background:linear-gradient(#253e4f,#183041);border-color:#7498ae;box-shadow:inset 0 -3px var(--accent);color:#fff}.tabs>button.selected>.ui-icon{color:var(--accent)}.tabs>button>.ui-icon,.settings-button>.ui-icon{width:20px;height:20px;color:#aac6d9}.settings-button>span{font-size:16px;margin:0}.count{border:1px solid #8c6c2b;background:#58451d;color:#ffdc88;font-size:12px;font-weight:600}
/* Detail surfaces */
dialog{background:linear-gradient(145deg,#142a3b,#0b1823 70%);border:1px solid #6a8a9f;box-shadow:0 30px 100px #000b;max-width:680px;padding:24px}dialog::backdrop{background:#03070cc7;backdrop-filter:blur(7px)}.modal-heading{padding-bottom:16px;margin-bottom:18px}.modal-heading h2{font-weight:600;letter-spacing:-.6px;font-size:27px}.modal-heading .eyebrow{display:block;color:#94b2c9;font-size:10px;letter-spacing:1.6px;margin-bottom:7px}#modalBody p{color:#c6d7e4;font-size:16px;line-height:1.55}.section-kicker{display:block;font-size:11px;letter-spacing:1.4px;color:#9fbacf;font-weight:650;margin:16px 0 10px}.option{border-color:#3f5d70;background:#132d3e70;padding:14px;border-radius:8px}.option:hover:is(button){border-color:#79a8c7;background:#1c3a4e}.option strong{font-size:17px;font-weight:600}.option small{font-size:13px;color:#b6cad9}.option>.ui-icon{width:18px;color:#aac8dd}.option-icon{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;background:#a5cbed0b}.option-icon>.ui-icon{width:24px}.option>span:nth-child(2){flex:1}.option input[type=text]{width:min(47%,235px);background:#091b29;color:#f5f9ff;border:1px solid #55778f;border-radius:6px;padding:12px;min-height:48px;font-size:16px}.option input[role=switch]{appearance:none;width:45px;height:26px;position:relative;background:#344d60;border:1px solid #7791a4;border-radius:20px;flex-shrink:0;cursor:pointer}.option input[role=switch]:before{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#c6d5df;left:3px;top:3px;transition:transform .15s}.option input[role=switch]:checked{background:#846524;border-color:#e4bc62}.option input[role=switch]:checked:before{transform:translateX(18px);background:#ffe6a3}.settings-group+.settings-group{margin-top:22px}.dialog-note{font-size:12px!important;line-height:1.5!important;color:#9bb6ca!important}.dialog-lead{font-size:18px!important}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(#ffda75,#f1b83d);box-shadow:inset 0 1px #ffffff50;font-weight:650;color:#192535;border:1px solid #ffd56d;border-radius:7px}.full-width{width:100%}.back-button{min-height:48px;color:#b5d8f1;font-size:15px}.data-list>div{background:#0b1c2b;border-color:#385b74}.data-list strong{font-family:'Bahnschrift','Segoe UI',sans-serif;font-weight:500}.service-summary{display:flex;align-items:center;gap:20px}.service-emblem{display:grid;place-items:center;width:66px;height:66px;border-radius:16px;border:1px solid #7d6532;background:#ffc34b10;color:#ffd36e}.service-emblem>.ui-icon{width:31px;height:31px}.service-summary strong{display:block;font-size:37px;font-family:'Bahnschrift','Segoe UI',sans-serif;font-weight:500;line-height:1}.service-summary strong small{font-family:'Segoe UI',sans-serif;font-size:16px;color:#c9d9e6}.service-summary .section-kicker{margin:0 0 10px;color:#f1c86e}.service-progress{height:6px;border-radius:4px;background:#30495e;overflow:hidden;margin:22px 0 10px}.service-progress i{display:block;height:100%;background:#ffcc60}.service-scale{display:flex;justify-content:space-between;font-size:12px;color:#a8c0d1}.checklist{padding:0;list-style:none;counter-reset:steps;margin:20px 0}.checklist li{display:flex;align-items:center;gap:12px;counter-increment:steps;padding:12px 0;border-bottom:1px solid #35536a66;color:#d7e4ee;font-size:15px}.checklist li:before{content:counter(steps);display:grid;place-items:center;width:25px;height:25px;border-radius:50%;border:1px solid #567d99;font-size:12px;flex-shrink:0;color:#b8d3e6}.service-due{text-align:right;font-size:27px;font-weight:600;color:#f3ce78;flex:0!important}.service-due small{font-size:12px;margin-top:1px;color:#b5c8d5}.service-option{gap:12px}.connection-summary{display:flex;align-items:center;gap:15px;padding:18px;border:1px solid #397a64;background:#153e332e;border-radius:8px;margin-bottom:24px}.connection-summary strong{font-size:18px;font-weight:600}.connection-summary small{display:block;margin-top:7px;font-size:13px}.connection-summary.is-offline{border-color:#98763c;background:#ad79241a}.is-offline .status-dot{background:#ffb660}.scenario-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 0 22px}.scenario{padding:15px 12px;min-height:98px;background:#142d3e;border:1px solid #466b85;border-radius:8px;text-align:left}.scenario.active{border-color:#ffcf6a;background:#4a3c231f;box-shadow:inset 0 0 0 1px #ffcf6a44}.scenario strong{display:block;font-size:16px;font-weight:600;margin-bottom:8px}.scenario small{font-size:12px;line-height:1.5;display:block}.system-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;border-bottom:1px solid #3a586e88;font-size:14px}.system-list span{display:flex;align-items:center;gap:10px;color:#c2d6e4}.system-list .ui-icon{width:18px;height:18px;color:#93b7d1}.system-list strong{font-weight:500;color:#dfebf4}.attachment-option{display:flex;align-items:center;gap:18px;width:100%;min-height:105px;padding:16px;margin:10px 0;border:1px solid #476b83;background:#15304466;border-radius:9px;text-align:left}.attachment-option:hover{background:#1b3c54}.attachment-option.active{border-color:#e8bc61;background:#82662c12;box-shadow:inset 3px 0 #ffcf6a}.tool-art{width:63px;height:60px;display:grid;place-items:center;flex-shrink:0;color:#bed2e0}.tool-art>.ui-icon{width:52px;height:52px;stroke-width:1.2}.tool-art.grading{transform:scaleX(1.2)}.tool-art.trenching{transform:scaleX(.7)}.attachment-option strong{display:block;font-size:18px;font-weight:600}.attachment-option small{display:block;font-size:13px;margin-top:7px;line-height:1.5}.selection-mark{margin-left:auto;color:#d6b571}.metric-detail-head{display:flex;gap:20px;align-items:center;padding:6px 0 18px}.metric-detail-icon{width:65px;height:65px;display:grid;place-items:center;border-radius:14px;background:#3b97c71a;border:1px solid #3d6680;color:#8cccf0}.metric-detail-icon>.ui-icon{width:31px;height:31px}.metric-detail-head .section-kicker{margin:0 0 8px}.metric-detail-head strong{font-size:48px;font-family:'Bahnschrift','Segoe UI',sans-serif;font-weight:500;line-height:1}.metric-detail-head small{font-size:21px;font-family:'Segoe UI',sans-serif}.chart-panel{padding:16px;background:#091a29;border:1px solid #31546e;border-radius:8px;margin:6px 0 18px}.chart-heading,.chart-caption{display:flex;justify-content:space-between;align-items:center;gap:10px}.chart-heading strong{font-size:14px;font-weight:500}.chart-heading span,.chart-caption{font-size:11px;color:#98b5ca}.trend-chart{display:block;width:100%;height:135px;margin:10px 0}.chart-wait{height:145px;display:grid;place-items:center;color:#9ebace;font-size:14px}.empty-state{padding:30px 12px;text-align:center}.empty-state>.ui-icon{display:block;width:45px;height:45px;color:#91b0c7;margin:0 auto 20px}.empty-state strong{display:block;font-size:24px}.camera-dialog{max-width:1100px;width:calc(100vw - 36px)}.camera-dialog-footer{display:flex;justify-content:space-between;gap:15px;color:#abc5d8;font-size:13px;padding:16px 0 0}.camera-dialog-footer>span{display:flex;align-items:center;gap:8px}.camera-dialog-footer .ui-icon{width:17px;height:17px}#toast{background:#19392e;border-color:#74b498;color:#e1f5e9;box-shadow:0 8px 30px #0008;font-size:15px;font-weight:500;padding:14px 20px;transition:opacity .15s}
@media(min-width:900px) and (max-height:700px){.app{padding:5px;gap:6px}.topbar h1{font-size:21px}.product-name{font-size:9px;letter-spacing:1.5px}.connection{font-size:13px}.instrument{height:45px;max-width:96px}.level-item>strong{font-size:28px}.panel-heading h2>.ui-icon{width:17px;height:17px}.panel-heading h2{font-size:14px;gap:6px}.position-body dd{font-size:23px}.reading{font-size:31px;margin:8px 0}.metric-label{font-size:13px}.metric-label>.ui-icon{width:16px;height:16px}.attachment-art{display:none}.attachment strong{font-size:15px}.attachment small{font-size:12px}.control-grid button{font-size:14px;grid-template-columns:26px 1fr;column-gap:6px;padding:6px}.control-icon svg{width:25px;height:25px}.tabs>button,.settings-button{gap:8px;font-size:15px}.settings-button>span{font-size:15px}.control-grid small{font-size:11px}.disconnected .secondary-camera .camera-unavailable>.ui-icon{width:25px;height:25px}}
@media(max-width:899px){.app{padding:6px;gap:6px}.topbar h1{font-size:21px}.product-name{font-size:9px;letter-spacing:1.4px}.connection #connectionLabel,.connection>.ui-icon,.connection .status-dot{display:none}.connection{padding:0;margin-left:auto;gap:0}.demo-tag{margin:0;font-size:10px}.instrument{height:62px;max-width:118px}.level-item>strong{font-size:30px}.reading{font-size:31px}.settings-button>.nav-label{display:none}.tabs>button{gap:7px;font-size:14px}.settings-button{flex-basis:59px}.settings-button>.ui-icon{width:23px;height:23px}.attachment-art{display:none}.position-body dd{font-size:24px}.control-grid small{font-size:11px}.panel-heading h2{font-size:16px}.position .panel-heading h2{font-size:15px}.location .panel-heading h2{font-size:14px}}
@media(max-width:500px){.app{padding:4px;gap:5px}.topbar h1{font-size:18px}.product-name{font-size:8px;letter-spacing:1px}.topbar .identity>img{width:29px;height:29px}.identity{gap:6px}.demo-tag{font-size:9px;padding:3px 4px}.topbar time{font-size:12px}.topbar .icon-button{min-width:36px;width:36px}.topbar .icon-button>.ui-icon{width:19px}.panel-heading h2{font-size:13px;gap:5px}.panel-heading h2>.ui-icon{width:15px;height:15px}.position .panel-heading h2{font-size:13px}.position h2:after{content:none}.position-body dd{font-size:22px}.position-body dt{font-size:12px}.instrument{height:41px;max-width:77px}.level-item>strong{font-size:25px}.metric-label{font-size:12px}.metric-label>.ui-icon{display:none}.reading{font-size:27px;margin:9px 0 6px}.reading small{font-size:12px}.attachment strong{font-size:13px}.attachment small{font-size:11px}.tabs>button{flex-direction:column;gap:2px;font-size:11px;min-height:46px}.tabs>button>.ui-icon{width:17px;height:17px}.tabs .count{position:absolute;right:5px;top:3px;min-width:14px;height:15px;font-size:9px}.settings-button{flex-basis:40px}.settings-button>.ui-icon{width:21px;height:21px}.control-grid button{font-size:12px}.control-grid small{font-size:10px}.control-icon svg{width:23px;height:23px}.camera-unavailable strong{font-size:18px}.camera-unavailable span{font-size:12px}dialog{padding:17px}.modal-heading h2{font-size:23px}.scenario-grid{grid-template-columns:1fr;gap:7px}.scenario{min-height:62px;padding:10px 12px}.scenario strong{margin-bottom:4px}.scenario small{font-size:12px}.data-list strong{font-size:19px}.attachment-option{gap:10px;padding:12px;min-height:94px}.tool-art{width:43px}.tool-art>.ui-icon{width:36px;height:36px}.attachment-option strong{font-size:16px}.attachment-option small{font-size:12px}.option{padding:10px}.option strong{font-size:15px}.option small{font-size:12px}.option-icon{width:25px}.service-due{font-size:24px}.service-summary strong{font-size:32px}.service-summary strong small{font-size:13px}.service-summary{gap:12px}.service-emblem{width:50px;height:50px}.camera-dialog-footer{font-size:11px}.camera-dialog-footer>span:last-child{display:none}.system-list>div{font-size:12px}.option input[type=text]{font-size:14px}.metric-detail-head strong{font-size:43px}.dialog-note{font-size:11px!important}}
@media(min-width:600px) and (max-width:899px) and (orientation:landscape){.app{padding:4px;gap:5px}.product-name{display:none}.topbar h1{font-size:21px}.instrument{display:none}.level-item>strong{font-size:30px}.panel-heading h2{font-size:14px}.position-body dd{font-size:24px}.reading{font-size:27px;margin:7px 0}.metric-label{font-size:12px}.metric-label>.ui-icon{width:14px;height:14px}.attachment strong{font-size:13px}.attachment small{font-size:11px}.tabs>button{font-size:14px;gap:7px}.tabs>button>.ui-icon{width:17px;height:17px}.control-grid button{font-size:14px}.control-grid small{font-size:10px}.control-icon svg{width:25px;height:25px}.connection{font-size:0}.camera-unavailable strong{font-size:17px}.camera-unavailable span{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}
#toast.warning{background:#48371e;border-color:#ba914c;color:#ffe4b3}
@media(min-width:900px) and (max-height:700px){.position-body dl{height:100%;display:grid;grid-template-rows:repeat(3,minmax(0,1fr))}.position-body dl>div{margin:0}.position-body dd{font-size:22px;line-height:1.1}.position-body dt{line-height:1.2}}
@media(max-width:899px) and (orientation:portrait){.metric{padding:8px}.metric .reading{margin:6px 0;line-height:1.05}.metric-label{line-height:1.25}.attachment strong{margin:5px 0;line-height:1.15}.attachment small{display:block;line-height:1.15}}
.source-error .camera-unavailable{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;background:radial-gradient(ellipse,#203342,#0c1721);text-align:center;padding:12px}.source-error .camera-photo,.source-error .camera-bottom,.source-error .camera-top,.source-error .inset{visibility:hidden}


/* ==========================================================================
   MachineBuddy layout refinement — October 2026
   Goals:
   - Make Boom/Bucket, Machine Level and Site Position use their full panels.
   - Increase instrument/data legibility without adding panel chrome.
   - Machine tab replaces Site Position with Maintenance.
   ========================================================================== */

/* OVERVIEW: use the entire available panel area */
@media (min-width:900px) {
  .middle-stack,
  .right-stack{
    grid-template-rows:minmax(0,1.34fr) minmax(0,.96fr);
  }

  /* Boom / bucket: image and values should dominate the card instead of floating
     in a padded center strip. */
  .position-body{
    height:calc(100% - 44px);
    display:grid;
    grid-template-columns:minmax(125px,44%) minmax(0,56%);
    gap:8px;
    padding:3px 8px 5px;
    align-items:stretch;
  }
  .position-body>img{
    width:100%;
    height:100%;
    max-height:none;
    object-fit:contain;
    align-self:stretch;
    filter:drop-shadow(0 5px 7px #0005);
  }
  .position-body dl{
    margin:0;
    height:100%;
    display:grid;
    grid-template-rows:repeat(3,minmax(0,1fr));
    align-items:stretch;
  }
  .position-body dl>div{
    margin:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    padding:2px 4px 2px 8px;
    border-bottom:1px solid #35505c55;
  }
  .position-body dl>div:last-child{border-bottom:0}
  .position-body dt{
    font-size:clamp(14px,1.05vw,18px);
    line-height:1.15;
    color:#c9d9e5;
  }
  .position-body dd{
    margin:0;
    font-size:clamp(25px,2.05vw,36px);
    line-height:1;
    font-weight:650;
    letter-spacing:-.65px;
  }
  .position-body dd small{
    font-size:.48em;
    font-weight:500;
    color:#b7cbd9;
  }

  /* Machine level: instrument artwork expands with the panel.
     The SVG keeps its own aspect ratio, so resizing the dashboard does not
     collapse the gauges into tiny fixed-size graphics. */
  .gauges{
    height:calc(100% - 44px);
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
    gap:4px;
    padding:3px 6px 6px;
  }
  .level-item{
    min-width:0;
    display:grid;
    grid-template-rows:minmax(0,1fr) auto auto;
    align-items:center;
    justify-items:center;
    gap:2px;
    padding:0 4px 4px;
  }
  .level-item + .level-item{
    border-left:1px solid #35505c66;
  }
  .instrument{
    width:100%;
    height:100%;
    min-height:0;
    max-width:none;
    margin:0;
    align-self:stretch;
  }
  .instrument>svg{
    width:100%;
    height:100%;
    max-width:none;
    overflow:visible;
  }
  .level-item>strong{
    font-size:clamp(31px,2.45vw,43px);
    line-height:.98;
    margin-top:-2px;
  }
  .level-item>span{
    margin:2px 0 0;
    font-size:clamp(14px,1.04vw,17px);
    font-weight:600;
    line-height:1.05;
  }
  .level-item small{
    display:inline;
    margin-left:4px;
    font-size:.78em;
    color:#aec3d2;
  }

  /* Site Position: map fills the left side, position values fill the right.
     Remove the large empty margins from the original compact card. */
  .location-body{
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns:minmax(135px,55%) minmax(115px,45%);
    gap:9px;
    align-items:stretch;
    padding:4px 7px 6px;
  }
  .location-body>img{
    width:100%;
    height:100%;
    max-height:none;
    min-height:0;
    object-fit:cover;
    border-radius:6px;
  }
  .location-body>div{
    min-width:0;
    display:grid;
    grid-template-rows:repeat(3,1fr);
    align-items:center;
    gap:0;
    padding:1px 0;
  }
  .location-body>div>strong{display:none}
  .location-body span{
    font-size:clamp(13px,1vw,16px);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }
  .location-body small{
    font-size:clamp(12px,.92vw,15px);
    white-space:nowrap;
  }
  .location>.chevron{
    position:absolute;
    right:7px;
    bottom:6px;
    opacity:.7;
  }
}

/* MACHINE TAB
   A machine-focused page should show the machine, not repeat the map.
   JS moves .maintenance into .right-stack while this page is active. */
body.machine-focus main{
  grid-template-rows:minmax(0,1fr) 122px;
}
body.machine-focus .lower-grid{
  display:none !important;
}
body.machine-focus .workspace{
  grid-template-columns:minmax(0,1.25fr) minmax(360px,.95fr);
  grid-template-rows:minmax(0,1fr);
  gap:8px;
}
body.machine-focus .primary-camera,
body.machine-focus .secondary-camera,
body.machine-focus .location{
  display:none !important;
}
body.machine-focus .middle-stack{
  display:grid;
  grid-template-rows:minmax(0,1fr);
  min-width:0;
}
body.machine-focus .middle-stack>.position{
  display:flex;
  flex-direction:column;
  min-height:0;
}
body.machine-focus .position-body{
  flex:1;
  height:auto;
  grid-template-columns:minmax(220px,48%) minmax(0,52%);
  gap:14px;
  padding:8px 14px 12px;
}
body.machine-focus .position-body>img{
  width:100%;
  height:100%;
  object-fit:contain;
}
body.machine-focus .position-body dl>div{
  padding:6px 8px 6px 14px;
}
body.machine-focus .position-body dt{
  font-size:clamp(18px,1.35vw,23px);
}
body.machine-focus .position-body dd{
  font-size:clamp(35px,3vw,52px);
}
body.machine-focus .right-stack{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:minmax(0,1.03fr) minmax(0,.97fr);
  gap:8px;
  min-width:0;
}
body.machine-focus .right-stack>.level,
body.machine-focus .right-stack>.maintenance{
  min-height:0;
  display:flex;
  flex-direction:column;
}
body.machine-focus .right-stack>.level .gauges{
  flex:1;
  height:auto;
}
body.machine-focus .right-stack>.maintenance .service-warning{
  margin:7px;
  width:calc(100% - 14px);
  min-height:56px;
}
body.machine-focus .right-stack>.maintenance .service-row{
  min-height:42px;
}
body.machine-focus .right-stack>.maintenance .service-row:last-child{
  display:flex;
}

/* Telemetry stays compact on Machine tab so the upper panels get the space. */
body.machine-focus .telemetry{
  min-height:0;
}
body.machine-focus .metric{
  padding:9px 11px;
}
body.machine-focus .reading{
  margin:8px 0 5px;
}

/* Wide / short tablets: preserve the same visual priorities. */
@media (min-width:900px) and (max-height:760px){
  .middle-stack,.right-stack{
    grid-template-rows:minmax(0,1.26fr) minmax(0,.92fr);
  }
  .position-body{
    grid-template-columns:minmax(105px,42%) minmax(0,58%);
    padding:2px 6px 3px;
  }
  .position-body dt{font-size:13px}
  .position-body dd{font-size:23px}
  .location-body{
    grid-template-columns:minmax(120px,54%) minmax(108px,46%);
    padding:3px 5px 4px;
  }
  .location-body span{font-size:12px}
  .location-body small{font-size:11px}

  .gauges{padding:1px 4px 3px}
  .level-item>strong{font-size:30px}
  .level-item>span{font-size:13px}

  body.machine-focus main{grid-template-rows:minmax(0,1fr) 98px}
  body.machine-focus .position-body{
    grid-template-columns:minmax(180px,46%) minmax(0,54%);
    padding:4px 9px 6px;
  }
  body.machine-focus .position-body dt{font-size:16px}
  body.machine-focus .position-body dd{font-size:32px}
}

/* Landscape medium tablets: override older machine-focus rules that reintroduced
   Site Position and tiny fixed gauges. */
@media (min-width:600px) and (max-width:899px) and (orientation:landscape){
  body.machine-focus .location{display:none !important}
  body.machine-focus .lower-grid{display:none !important}
  body.machine-focus .workspace{
    grid-template-columns:1.15fr .85fr;
    grid-template-rows:1fr;
  }
  body.machine-focus .middle-stack{
    grid-column:1;
    grid-row:1;
  }
  body.machine-focus .right-stack{
    grid-column:2;
    grid-row:1;
    grid-template-columns:1fr;
    grid-template-rows:1fr 1fr;
  }
  body.machine-focus .position{
    grid-column:auto;
    grid-row:auto;
  }
  body.machine-focus .level{
    grid-column:auto;
    grid-row:auto;
  }
  .instrument{
    display:block !important;
    width:100%;
    height:100%;
    max-width:none;
  }
}


/* Stronger visual feedback for the animated pitch/roll concept */
.attitude-body{
  transform-box:fill-box;
  transform-origin:center 82%;
  transition:transform 70ms linear;
}
.instrument>svg{
  overflow:visible;
}
.level-item{
  position:relative;
}
.level-item::before{
  content:'';
  position:absolute;
  left:11%;
  right:11%;
  top:50%;
  height:2px;
  background:linear-gradient(90deg,transparent,#62d8e955 12%,#62d8e9 50%,#62d8e955 88%,transparent);
  filter:drop-shadow(0 0 4px #62d8e966);
  pointer-events:none;
}
.level-item>strong{
  font-variant-numeric:tabular-nums;
}