#app-menu-button,#close-map-search{display:none} #app-menu{width:min(380px,calc(100vw - 24px));box-sizing:border-box;padding:20px;border:0;border-radius:16px;background:#fff;color:#183d39} #app-menu::backdrop{background:#183d3970}.menu-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.menu-heading h2{margin:0;font-size:24px}.menu-heading button{width:44px;height:44px;border:0;border-radius:50%;background:#edf1eb;font-size:24px} .menu-items{display:grid;grid-template-columns:1fr 1fr;gap:10px}.menu-items button{min-height:52px;padding:12px;text-align:left;font-size:16px;font-weight:500;border:1px solid #cad6c6;border-radius:8px;background:#f6f7f2;color:#183d39}.menu-items button:disabled{opacity:.5}.menu-items .menu-sos{background:#a12f31;color:white;border:0} @media(max-width:1024px){ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body,button,input,select,textarea{font-family:"Avenir Next","Segoe UI",Arial,sans-serif;font-size:16px} body>header{height:64px;min-height:64px;padding:8px 12px;box-sizing:border-box;display:flex;flex-wrap:nowrap;gap:10px} body>header>:not(.brand):not(#app-menu-button):not(.header-weather){display:none!important} body>header .brand{flex:1;min-width:0;width:auto;max-width:none;margin:0;gap:8px} body>header .horus-logo{width:42px;height:32px;object-fit:contain} body>header .brand-title{font-size:16px;letter-spacing:.08em;padding-left:10px;line-height:1.25} body>header .brand-title b{display:block;font-size:11px;letter-spacing:.04em;white-space:nowrap} body>header .brand small{display:none} #app-menu-button{display:flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;height:44px;min-height:44px;width:auto;min-width:88px;padding:0 12px;border:1px solid #82998b;border-radius:8px;background:#f6f7f2;color:#183d39;font-size:15px} main{display:block;position:relative;height:calc(100dvh - 64px);min-height:0}.map-area{position:absolute;inset:0;width:100%;height:100%} body .sidebar{display:none!important} body.map-search-visible .sidebar{display:block!important;position:absolute;left:12px;right:12px;top:12px;width:auto;max-height:70%;overflow:auto;z-index:10;background:#fff;border:1px solid #ccd7c9;border-radius:12px} #close-map-search{display:block;margin:0 0 8px auto;min-height:44px;padding:8px 12px;border:1px solid #82998b;border-radius:8px;background:#edf1eb} .sidebar-top{padding:12px}.map-search-visible #mobile-search-panel{display:grid!important;grid-template-columns:100px minmax(0,1fr);gap:8px}.map-search-visible #mobile-search-toggle{display:none!important} .map-top{top:12px!important;right:12px!important;left:auto!important}.map-controls{top:76px!important;right:12px!important} #empty-card,#selected-card{left:12px!important;right:12px!important;bottom:36px!important;width:auto!important;max-width:420px;box-sizing:border-box;padding:14px!important} #empty-card h1,#empty-card>.eyebrow{display:none}#empty-card p{font-size:16px;line-height:1.4;margin:0 0 10px}#empty-card button{font-size:16px;min-height:48px} #handover h2{font-size:24px}#handover p,#handover button strong{font-size:16px}#handover button small{font-size:14px} } /* Equal rows keep every menu action the same size, including wrapped labels. */ #app-menu .menu-items{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;align-items:stretch} #app-menu .menu-items button{width:100%;height:100%;min-height:76px;box-sizing:border-box;margin:0;display:flex;align-items:center;line-height:1.4;overflow-wrap:anywhere} #app-menu .menu-items button{gap:12px;justify-content:flex-start;font-size:16px;padding:12px} #app-menu .menu-items button svg{width:24px;height:24px;flex:0 0 24px} #app-menu .menu-items button span{white-space:nowrap} /* Fixed square dimensions prevent inherited minimum heights creating ovals. */ #farm-picker>.icon-btn,#account-dialog>.icon-btn,#places-dialog #places-close, #app-menu .menu-heading>button,dialog button[aria-label^="Close"]{display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;max-height:44px;flex:0 0 44px;aspect-ratio:1;box-sizing:border-box;padding:0;border-radius:50%;line-height:1} #farm-picker .farm-options [aria-pressed=true]::after{content:none} #app-menu .menu-items button{justify-content:center;align-items:center;text-align:center} /* Centre icon and label independently on the same vertical axis. */ #app-menu .menu-items button{flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:96px;text-align:center;padding:12px} #app-menu .menu-items button svg{display:block;margin:0;width:24px;height:24px;flex:0 0 24px} #app-menu .menu-items button span{display:block;margin:0;line-height:1.25;text-align:center} /* Shared alignment corrections after the mobile layout review. */ #selected-card .destination-head .icon-btn{display:flex;align-items:center;justify-content:center;width:36px;min-width:36px;height:36px;min-height:36px;max-height:36px;flex:0 0 36px;padding:0;border-radius:50%;line-height:1;box-sizing:border-box} #selected-card .go-button{display:flex;align-items:center;justify-content:center;gap:10px;line-height:1.25;box-sizing:border-box} #farm-picker h2,#account-dialog h2{min-height:44px;display:flex;align-items:center;margin-top:0;line-height:1.25} #mobile-search-panel .search{display:flex;align-items:center;box-sizing:border-box} #mobile-search-panel #search-submit{display:flex;align-items:center;justify-content:center;padding:0;line-height:1;flex-shrink:0} #places-dialog .office-filters button,#places-dialog .fuel-filters button{box-sizing:border-box} @media(max-width:1024px){ #empty-card{display:flex;align-items:center;gap:14px} #empty-card p{flex:1;min-width:0;margin:0!important;line-height:1.4} #empty-card .primary{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;min-height:48px;margin:0;padding:12px;line-height:1.25;text-align:center;box-sizing:border-box;white-space:normal;max-width:48%} #empty-card .primary span{display:none} } @media(max-width:360px){#empty-card{flex-direction:column;align-items:stretch}#empty-card .primary{max-width:none;width:100%}} #mobile-search-panel .search:focus-within{outline:2px solid #42665a;outline-offset:2px} #mobile-search-panel #search{border:0;box-shadow:none;background:transparent;min-width:0} #mobile-search-panel #search:focus-visible{outline:none} @media(min-width:761px) and (max-width:1024px){.map-legend{display:none}} /* Keep the search shortcut aligned with the existing map controls. */ #map-search-shortcut{display:grid;place-items:center;padding:0} @media(max-width:1024px){.map-actions{top:68px!important;right:12px!important}} /* Search is a single compact panel: farm and close, search, then results. */ @media(max-width:1024px){ body.map-search-visible .sidebar{display:flex!important;flex-direction:column;max-height: min(560px,calc(100dvh - 100px));max-width:560px;overflow:hidden;background:#fff;box-shadow:0 8px 28px #183d3920} body.map-search-visible .sidebar-top{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:12px;padding:12px;flex:0 0 auto;background:#fff;border-bottom:1px solid #dce3da} .map-search-visible .mobile-tools{grid-column:1;grid-row:1;margin:0;min-width:0;border:0;padding:0} .map-search-visible #mobile-farm{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:44px;min-height:44px;margin:0;padding:0 10px;border:1px solid #ccd7c9;border-radius:8px;background:#f6f7f2;font-size:16px;line-height:1.25} .map-search-visible #mobile-farm .farm-change{padding:0;background:none;font-size:14px;font-weight:500} .map-search-visible #close-map-search{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:1px solid #ccd7c9;border-radius:50%;background:#edf1eb;color:#183d39} .map-search-visible #mobile-search-panel{grid-column:1/-1;grid-row:2;display:grid!important;grid-template-columns:88px minmax(0,1fr);gap:8px;margin:0;padding:0} .map-search-visible #mobile-search-panel #search-mode{width:100%;height:48px;min-height:48px;margin:0;padding:0 8px;border:1px solid #82998b;border-radius:8px;font-size:16px;background:#f6f7f2} .map-search-visible #mobile-search-panel .search{width:100%;height:48px;min-height:48px;margin:0;padding:3px 3px 3px 10px;gap:6px;border:1px solid #82998b;border-radius:8px;background:#fff} .map-search-visible #mobile-search-panel .search:focus-within{outline:0;border-color:#183d39;box-shadow:0 0 0 1px #183d39} .map-search-visible #search-submit{width:40px;height:40px;min-height:40px;flex:0 0 40px;border-radius:6px} .map-search-visible #search{width:100%;height:40px;min-height:0;padding:0;margin:0;line-height:1.25} body.map-search-visible .sidebar #turbines:not([hidden]){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:8px;padding:12px;margin:0;max-height: min(360px,45dvh);overflow:auto;min-height:0;flex:1 1 auto} .map-search-visible #turbines .turbine-row{width:100%;min-width:0;min-height:48px;display:flex;align-items:center;justify-content:center;margin:0;padding:8px;border:1px solid #ccd7c9;border-radius:8px;background:#f6f7f2} .map-search-visible #turbines .row-title{font-size:15px;line-height:1.3} .map-search-visible #turbines .row-sub,.map-search-visible #turbines .row-arrow,.map-search-visible #turbines .turbine-symbol{display:none} body.map-search-visible .sidebar #map-search-results:not([hidden]){max-height:45dvh;overflow:auto;padding:0 12px 12px;min-height:0} .map-search-visible .sidebar-foot,.map-search-visible .list-heading{display:none!important} #app-menu{max-height:calc(100dvh - 24px);overflow:auto} #places-dialog .service-page-head{gap:12px;margin-bottom:12px} #places-dialog .service-page-head h3{font-size:22px} } @media(min-width:500px) and (max-width:1024px){body.map-search-visible .sidebar #turbines:not([hidden]){grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-height:600px){#app-menu .menu-items button{min-height:64px;gap:4px;padding:8px}#app-menu .menu-heading{margin-bottom:8px}} /* Keep contact actions beside each other instead of wasting a second row. */ @media(max-width:400px){ #places-dialog .service-results article>.service-phones{padding-right:88px;grid-row:3} #places-dialog .service-results article>a.service-map-link{grid-row:3;width:80px} #places-dialog .service-results .service-phone-row{gap:6px} #places-dialog .service-results .service-phone-row>strong{font-size:14px} } @media(max-width:350px){ #places-dialog .service-results article>.service-phones{padding-right:72px} #places-dialog .service-results .service-phone-row>button,#places-dialog .service-results article>a.service-map-link{width:64px;min-width:64px;max-width:64px;flex-basis:64px} } /* Search categories include longer names such as Places & roads and Plus Code. */ @media(max-width:1024px){ .map-search-visible #mobile-search-panel{grid-template-columns:minmax(0,1fr)} .map-search-visible #mobile-search-panel #search-mode{padding:0 12px;min-width:0} .map-search-visible #mobile-search-panel .search{min-width:0} } @media(min-width:500px) and (max-width:1024px){ .map-search-visible #mobile-search-panel{grid-template-columns:180px minmax(0,1fr)} } /* Map stays clear; secondary controls live in Menu > Tools. */ #empty-card{display:none!important} #map-tools{width:min(380px,calc(100vw - 24px));padding:20px;border-radius:16px;background:#fff;color:#183d39} #map-tools .tool-actions{display:grid;gap:12px} #map-tools .tool-actions button{width:100%;min-height:48px;padding:12px;border:1px solid #82998b;border-radius:8px;background:#f6f7f2;color:#183d39;font-size:16px;text-align:center;box-shadow:none} #app-menu-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid #82998b;border-radius:8px;background:#f6f7f2;color:#183d39} @media(max-width:1024px){.map-actions{top:12px!important}} @font-face{font-family:"Horus Avenir";src:url('./assets/fonts/AvenirNext-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap} html body,body button,body input,body select,body textarea,body dialog{font-family:"Horus Avenir","Avenir Next","Segoe UI",Arial,sans-serif} .tools-note{font-size:14px;color:#405b52;margin:12px 0 0}.tools-note:empty{display:none} @font-face{font-family:"Horus Avenir";src:url('./assets/fonts/AvenirNext-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Horus Avenir";src:url('./assets/fonts/AvenirNext-DemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Horus Avenir";src:url('./assets/fonts/AvenirNext-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap} /* Search follows category, farm, then query in reading order. */ @media(max-width:1024px){ .map-search-visible #mobile-search-panel{display:contents!important} .map-search-visible #mobile-search-panel #search-mode{grid-column:1;grid-row:1} .map-search-visible #close-map-search{grid-column:2;grid-row:1;align-self:center} .map-search-visible .mobile-tools{grid-column:1/-1;grid-row:2} .map-search-visible #mobile-search-panel .search{grid-column:1/-1;grid-row:3} } #weather-shortcut{display:grid;place-items:center;padding:0} #weather-panel{width:min(420px,calc(100vw - 24px));background:#fff;padding:20px;border-radius:16px} #weather-panel .weather-summary{padding:16px 0;border-top:1px solid #ccd7c9} #weather-panel p{font-size:16px;line-height:1.5;margin:8px 0} #weather-panel small{display:block;margin-top:8px} #weather-panel .weather-summary button{width:100%;min-height:48px;border:1px solid #82998b;border-radius:8px;background:#edf1eb;color:#183d39;font:inherit} .account-actions{display:grid;gap:12px}.account-actions button,.account-actions a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px;border:1px solid #82998b;border-radius:8px;background:#f6f7f2;color:#183d39;font:inherit;text-decoration:none} /* Account is available through Menu; retain its action target. */ header #account-button{display:none!important} /* Keep desktop controls at the right edge after removing Account. */ @media(min-width:1025px){body>header .brand{margin-right:auto}} #weather-panel{width:min(600px,calc(100vw - 24px));max-height:85dvh;overflow:auto;box-sizing:border-box}#weather-panel .weather-location{font-weight:600}#weather-panel [role=status],#weather-panel .weather-footnote{font-size:13px;color:#526961}.weather-now{display:grid;gap:4px;padding:12px 0 20px}.weather-now>strong{font-size:44px}.weather-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.weather-metrics>div{display:grid;gap:6px;background:#edf2ec;padding:12px;border-radius:10px}.weather-metrics small{font-size:12px}.weather-metrics strong{font-size:17px}.weather-hours{overflow:auto}.weather-hours table{width:100%;border-collapse:collapse;font-size:14px;white-space:nowrap}.weather-hours th,.weather-hours td{text-align:left;padding:10px 8px;border-bottom:1px solid #d6dfd5}.weather-day{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid #d6dfd5}.weather-refresh{margin-top:20px;min-height:44px;width:100%;border:1px solid #82998b;border-radius:8px;background:#edf1eb;font:inherit;color:#183d39}#weather-panel>a{font-size:12px;color:#526961} .lightning-panel{padding:16px;background:#f5f1e8;border:1px solid #d9cbb3;border-radius:12px;margin:16px 0}.lightning-panel button{min-height:44px;padding:10px 16px;font:inherit;border:1px solid #82998b;border-radius:8px;background:white;color:#183d39}.lightning-panel h4{margin:12px 0 4px}.lightning-panel small,.lightning-panel a{display:block;font-size:12px;margin-top:12px}.lightning-results{margin-top:12px} .lightning-location{border:0;padding:0;margin:12px 0}.lightning-location legend{font-weight:600}.lightning-location label{display:flex;align-items:center;gap:8px;min-height:44px}.lightning-target{font-size:13px;overflow-wrap:anywhere} #weather-panel{border:1px solid #d6dfd5;border-radius:20px;padding:24px;background:#fafbf8}#weather-panel [hidden]{display:none!important}.weather-overview{background:white;padding:20px;border:1px solid #e0e7dc;border-radius:14px}.weather-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.weather-nav button{font:inherit;font-weight:600;min-height:82px;padding:12px 8px;border:1px solid #c8d6c5;border-radius:12px;background:white;color:#183d39;cursor:pointer}.weather-nav button span{display:block;font-weight:400;font-size:11px;margin-top:6px}.weather-nav button[aria-expanded=true]{background:#234f40;color:white}.weather-nav button:focus-visible{outline:3px solid #b17b59;outline-offset:2px}#weather-forecast-view,#weather-radar-view{padding:18px;background:white;border:1px solid #d6dfd5;border-radius:12px;margin-bottom:16px}.radar-refresh{font:inherit;padding:12px;min-height:44px;border:1px solid #82998b;border-radius:8px;background:#edf2ec;color:#183d39}.radar-image{position:relative}.radar-image img{display:block;width:100%;border-radius:8px}.radar-image:has(img):after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border:3px solid white;border-radius:50%;background:#126be0;box-shadow:0 0 0 2px #183d39}#weather-panel .weather-now{padding:4px 0 16px}.weather-overview .weather-refresh{margin-top:16px}@media(max-width:420px){#weather-panel{padding:14px}.weather-overview{padding:14px}.weather-nav{gap:6px}.weather-nav button{font-size:14px}.weather-nav button span{font-size:10px}} /* Weather panel: overview, navigation, and focused detail views. */ #weather-panel{width:min(640px,calc(100vw - 24px));padding:0;background:#f5f7f2;border:1px solid #d6dfd5;border-radius:24px;box-shadow:0 24px 80px #102e3540;color:#183d39;max-height:90dvh} #weather-panel>.menu-heading{position:sticky;top:0;z-index:3;margin:0;padding:22px 26px 18px;background:#f5f7f2f5;border-bottom:1px solid #e1e7dc;align-items:center} #weather-panel .menu-heading h2{font-size:26px;line-height:1.15;letter-spacing:-.7px;margin:4px 0 0}.weather-eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:600;color:#63796f} #weather-panel>.menu-heading>button{background:#e8ede3;color:#365749;flex-shrink:0} #weather-panel .weather-overview{margin:20px 24px 0;padding:22px 24px;background:#fff;border:1px solid #dde5d8;border-radius:18px;position:relative;overflow:hidden} #weather-panel .weather-location{font-size:17px;font-weight:600;margin:0 0 3px}#weather-panel .weather-overview>[role=status]{font-size:12px;line-height:1.5;margin:0;color:#60786c} #weather-panel .weather-now{padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}#weather-panel .weather-now>strong{font-size:64px;font-weight:600;line-height:1;letter-spacing:-3px;color:#214d3e;white-space:nowrap}.temperature-unit{font-size:30px;font-weight:400;letter-spacing:-1px;vertical-align:top;display:inline-block;margin:8px 0 0 4px}#weather-panel .weather-now>span{font-size:16px;color:#526c5f;max-width:45%;text-align:right;line-height:1.4} #weather-panel .weather-metrics{gap:0;padding:16px 0;border-top:1px solid #e2e9de;border-bottom:1px solid #e2e9de}.weather-metrics>div{background:transparent;padding:0 14px;gap:7px;border-right:1px solid #e2e9de}.weather-metrics>div:first-child{padding-left:0}.weather-metrics>div:last-child{border:0;padding-right:0}#weather-panel .weather-metrics small{color:#60786c;font-size:11px;margin:0}#weather-panel .weather-metrics strong{font-size:20px;white-space:nowrap;letter-spacing:-.5px}.weather-metrics span{font-size:11px;color:#60786c} #weather-panel .weather-refresh{margin:14px 0 0;width:auto;min-height:36px;padding:6px 0;border:0;background:none;font-size:13px;font-weight:600;color:#35674e;text-decoration:underline;text-underline-offset:4px} #weather-panel .weather-footnote{font-size:11px;line-height:1.5;margin:10px 0 0;color:#718075} #weather-panel .weather-nav{margin:16px 24px 20px;gap:10px}.weather-nav button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:14px 16px;min-height:112px;text-align:left;border-radius:14px;font-size:15px;border-color:#d6dfd0;transition:background .15s,color .15s}.weather-nav button:hover{border-color:#6e9077;background:#edf2e7}.weather-nav button[aria-expanded=true]{background:#234f40;color:#fff;border-color:#234f40}.weather-nav button span{margin:0;font-size:10px;line-height:1.4;color:#64786c}.weather-nav button[aria-expanded=true] span{color:#d5e5d7}.weather-nav button .weather-nav-icon{font-family:system-ui;font-size:25px;line-height:1;margin-bottom:8px;color:inherit} #weather-panel>#weather-forecast-view,#weather-panel>#weather-radar-view,#weather-panel>.lightning-panel{margin:0 24px 20px;padding:22px;background:#fff;border:1px solid #d6dfd5;border-radius:18px}#weather-panel h3{font-size:18px;letter-spacing:-.3px;margin:0 0 16px}#weather-panel .forecast-content>h3{font-size:13px;letter-spacing:0;margin:22px 0 12px;color:#526c5f}#weather-panel .weather-hours th{font-size:10px;color:#64786c;padding:10px 6px;background:#f4f7f0}#weather-panel .weather-hours td{font-size:13px;padding:12px 6px}#weather-panel .weather-hours td:first-child{font-weight:600}.weather-hours tr:last-child td{border-bottom:0}#weather-panel .weather-day{grid-template-columns:1fr auto;gap:5px 12px;padding:14px 0}#weather-panel .weather-day>strong{font-size:14px}#weather-panel .weather-day>span{font-size:12px;color:#60786c}#weather-panel .weather-day>span:last-child{grid-column:1/-1} #weather-panel .lightning-panel p,#weather-panel #weather-radar-view>p{font-size:13px;line-height:1.6}#weather-panel .lightning-location{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.lightning-location legend{font-size:12px;padding-bottom:10px}.lightning-location label{padding:10px;border:1px solid #d8e1d2;border-radius:10px;background:#fafcf7;font-size:12px;cursor:pointer}.lightning-location label:has(input:checked){background:#e9f1e3;border-color:#6c8a73}.lightning-location input{accent-color:#285640;flex-shrink:0}#weather-panel .lightning-check,#weather-panel .radar-refresh{width:100%;background:#234f40;color:white;border:0;min-height:46px;font-size:14px;font-weight:600;border-radius:10px}#weather-panel button:disabled{opacity:.55;cursor:wait}#weather-panel .lightning-results{padding:14px;background:#f4f7ef;border-radius:10px;font-size:13px;line-height:1.6}.lightning-results h4{font-size:13px}.lightning-results p{margin:6px 0 12px}#weather-panel>a{display:block;text-align:center;padding:0 24px 20px;font-size:10px;color:#6c7e72}#weather-panel button:focus-visible{outline:3px solid #b48961;outline-offset:3px} @media(max-width:440px){#weather-panel{border-radius:18px}#weather-panel>.menu-heading{padding:18px}#weather-panel .weather-overview{margin:14px 14px 0;padding:18px}#weather-panel .weather-nav{margin:12px 14px 16px;gap:7px}.weather-nav button{padding:12px 10px;font-size:13px;min-height:104px}.weather-nav button span{font-size:9px}#weather-panel>#weather-forecast-view,#weather-panel>#weather-radar-view,#weather-panel>.lightning-panel{margin:0 14px 16px;padding:16px}#weather-panel .weather-now>strong{font-size:54px}#weather-panel .weather-metrics strong{font-size:17px}.weather-metrics>div{padding:0 10px}#weather-panel .weather-now>span{font-size:14px}} /* Align each weather metric on matching label and value rows. */ #weather-panel .weather-metrics{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}#weather-panel .weather-metrics>div{display:grid;grid-template-rows:20px 30px;align-content:start;align-items:center;gap:6px;border-radius:0;min-width:0}#weather-panel .weather-metrics small{line-height:20px;white-space:nowrap}#weather-panel .weather-metrics strong{line-height:30px;margin:0;font-size:18px}#weather-panel .wind-low{color:#237342}#weather-panel .wind-medium{color:#946500}#weather-panel .wind-high{color:#b52e34}.weather-condition{display:flex;align-items:center;gap:10px}.condition-icon{width:44px;height:44px;flex:0 0 44px;color:#597d72}#weather-panel .weather-nav button{align-items:center;text-align:center}#weather-panel .weather-nav button span{text-align:center}#weather-panel .weather-nav .weather-nav-icon{align-self:center}@media(max-width:540px){#weather-panel .weather-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 0}#weather-panel .weather-metrics>div{padding:0 12px}#weather-panel .weather-metrics>div:nth-child(odd){padding-left:0;border-right:1px solid #e2e9de}#weather-panel .weather-metrics>div:nth-child(even){border-right:0}#weather-panel .weather-condition{flex-direction:column;gap:5px;text-align:center}.condition-icon{width:36px;height:36px;flex-basis:36px}} #weather-panel .weather-metrics>div{justify-items:center;text-align:center;padding-left:8px;padding-right:8px!important}#weather-panel .weather-metrics small,#weather-panel .weather-metrics strong{text-align:center}#weather-panel .wind-badge{display:inline-block;padding:0 9px;border-radius:7px;min-width:76px}#weather-panel .wind-badge.wind-low{background:#e0f1e4;color:#195c32}#weather-panel .wind-badge.wind-medium{background:#fff0b5;color:#735100}#weather-panel .wind-badge.wind-high{background:#fbe0e2;color:#95242b}.wind-key{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-size:10px}.wind-key span{display:flex;align-items:center;gap:5px}.wind-key span:before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0} #weather-panel .weather-nav .weather-nav-icon{display:block;width:24px;height:24px;min-width:24px;min-height:24px;flex:0 0 24px;margin:0 0 8px;align-self:center} #weather-panel .lightning-results{padding:14px;background:#f3f5ef}.lightning-check-time{font-size:11px;color:#627366;margin-bottom:12px}.lightning-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}#weather-panel .lightning-card{display:flex;flex-direction:column;align-items:center;text-align:center;background:white;border:1px solid #d6dfd5;border-radius:12px;padding:16px 10px;gap:6px}.lightning-card-title{display:flex;align-items:center;justify-content:center;gap:7px;min-height:30px}#weather-panel .lightning-card h4{margin:0;font-size:12px}.lightning-card-title svg{flex:0 0 24px}#weather-panel .lightning-number{font-size:40px;line-height:1.2;letter-spacing:-1px}.lightning-short{font-size:12px;font-weight:600}.lightning-period{font-size:11px;color:#627366}#weather-panel .lightning-card.activity{background:#fff0df;border-color:#cc9853;color:#824200}#weather-panel .lightning-card.unavailable{background:#ededeb;color:#656b67}#weather-panel .lightning-card small{margin:0;font-size:10px}#weather-panel .lightning-result-note{font-size:11px;margin:12px 0 0;line-height:1.5}@media(max-width:380px){.lightning-card-title{flex-direction:column}.lightning-card-grid{gap:7px}#weather-panel .lightning-card{padding:12px 6px}} .hourly-cards{display:flex;gap:9px;overflow-x:auto;padding:2px 0 12px;scroll-snap-type:x proximity}.hour-card{flex:0 0 84px;display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 8px;border:1px solid #dce5d6;border-radius:14px;background:#f8faf5;scroll-snap-align:start}.hour-card time{font-size:12px;font-weight:600;color:#526c5f}.hour-card .condition-icon{width:34px;height:34px}.hour-temp{font-size:23px;line-height:1}.rain-reading,.hour-wind{display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;font-weight:600}.rain-reading{color:#376a89}.hour-card small{font-size:10px}.hour-card .hour-wind{font-size:13px}.forecast-hint{float:right;font-size:10px;font-weight:400;color:#718075}.forecast-units{font-size:10px!important;color:#718075;margin:6px 0 18px!important}.daily-cards{display:grid;gap:10px}.daily-card{display:grid;grid-template-columns:60px minmax(80px,1fr) 65px 80px;gap:12px;align-items:center;border:1px solid #dce5d6;border-radius:13px;padding:15px 12px;background:#fafcf7}.daily-date,.daily-temp,.daily-rain,.daily-condition{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.daily-date strong{font-size:14px}.daily-card small{font-size:10px!important;color:#718075}.daily-condition .condition-icon{height:34px;width:34px}.daily-condition small{max-width:120px;line-height:1.3}.daily-temp{display:grid;grid-template-columns:1fr 1fr;gap:3px 7px}.daily-temp strong{font-size:20px}.daily-temp>span{font-size:16px;color:#718075}.daily-temp small{grid-column:1/-1}.daily-rain meter{width:65px;height:8px;border:0}.daily-rain meter::-webkit-meter-bar{background:#e1eaf0;border:0;border-radius:5px}.daily-rain meter::-webkit-meter-optimum-value{background:#5d94b3;border-radius:5px}@media(max-width:440px){.daily-card{grid-template-columns:44px minmax(50px,1fr) 56px 62px;gap:7px;padding:12px 8px}.daily-rain meter{width:52px}.daily-temp strong{font-size:18px}.daily-temp>span{font-size:14px}.forecast-hint{float:none;display:block;margin-top:5px}.hour-card{flex-basis:78px}} header .sensor-status{display:none!important}.header-weather{display:flex;align-items:center;gap:10px;margin-left:auto}.header-weather button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:transparent;border:0;padding:4px;min-width:48px;color:#183d39;cursor:pointer}.header-weather .condition-icon{width:24px;height:24px;flex-basis:24px}.header-weather small{font-size:11px;font-weight:600;white-space:nowrap}.header-wind-symbol{font-size:24px;line-height:24px;height:24px}.header-weather-label{font-size:9px;color:#63796f}.header-weather .wind-low{color:#237342}.header-weather .wind-medium{color:#946500}.header-weather .wind-high{color:#b52e34}@media(max-width:1024px){body>header>.header-weather{display:flex!important;gap:2px}.header-weather button{min-width:38px;padding:2px}.header-weather small{font-size:10px}.header-weather .header-weather-label{font-size:8px}body>header .brand-title{display:none}body>header .brand{flex:1}} /* Larger, two-line header readings. */ header .header-weather{gap:12px}header .header-weather button{min-width:72px;min-height:48px;padding:4px 8px;gap:4px}header .header-weather small{font-size:16px;font-weight:600;line-height:20px}header .header-weather .header-weather-label{font-size:13px;font-weight:500;line-height:20px;color:#526c5f}header .header-weather .condition-icon{width:24px;height:24px;flex-basis:24px}@media(max-width:540px){header .header-weather{gap:2px}header .header-weather button{min-width:62px;padding:2px 4px}header .header-weather small{font-size:14px}header .header-weather .header-weather-label{font-size:12px}} /* A single aligned group for current conditions and wind readings. */ header .header-weather{gap:0;padding:3px;background:#edf2e9;border:1px solid #d4dfce;border-radius:12px}header .header-weather button{display:grid;grid-template-rows:22px 24px;justify-items:center;align-items:center;align-content:center;gap:2px;min-width:82px;padding:2px 8px;border-radius:0}header .header-weather button+button{border-left:1px solid #d4dfce}header .header-weather .condition-icon{width:22px;height:22px}header .header-weather small{line-height:24px;font-size:15px}header .header-weather .header-weather-label{line-height:22px;font-size:12px}header .header-weather .header-wind-badge{padding:0 7px;border-radius:6px;white-space:nowrap}header .header-weather .header-wind-badge.wind-low{background:#d9eddf;color:#195c32}header .header-weather .header-wind-badge.wind-medium{background:#fff0b5;color:#735100}header .header-weather .header-wind-badge.wind-high{background:#fbe0e2;color:#95242b}@media(max-width:540px){header .header-weather button{min-width:64px;padding:2px 4px}header .header-weather small{font-size:13px}header .header-weather .header-wind-badge{padding:0 4px}} /* Header shortcuts remain action targets for Menu entries. */ body>header .sos-button,body>header [aria-label="List all bookmarks"],body>header #help{display:none!important} /* Match the weather group and Menu outer heights. */ body>header .header-weather,body>header #app-menu-button{box-sizing:border-box;height:60px;min-height:60px;max-height:60px;border-radius:12px;align-self:center} /* Distinct yellow caution range, with readable dark text. */ #weather-panel .wind-medium,header .header-weather .wind-medium{color:#625000} #weather-panel .wind-badge.wind-medium,header .header-weather .header-wind-badge.wind-medium{background:#ffe34d;color:#493c00} .wind-key span{padding:4px 8px;border-radius:6px} #weather-panel .wind-key .wind-medium{background:#fff3a6;color:#493c00} #weather-panel .wind-key .wind-medium:before{background:#ffdc00;border:1px solid #9e8400;box-sizing:border-box;width:10px;height:10px;border-radius:2px} #weather-panel .hour-wind.wind-medium,#weather-panel .hour-card small.wind-medium{background:#fff3a6;color:#493c00;border-radius:4px;padding:2px 4px} /* Consistent badges for all wind ranges. */ #weather-panel .wind-key{display:flex;justify-content:center;gap:8px;flex-wrap:wrap} #weather-panel .wind-key span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:28px;padding:5px 9px;border-radius:7px;font-size:11px;line-height:16px;font-weight:500;box-sizing:border-box} #weather-panel .wind-key .wind-low{background:#d9eddf;color:#195c32} #weather-panel .wind-key .wind-medium{background:#fff3a6;color:#493c00} #weather-panel .wind-key .wind-high{background:#fbe0e2;color:#95242b} #weather-panel .wind-key span:before{width:8px;height:8px;flex:0 0 8px;border-radius:50%;border:0;box-sizing:border-box} #weather-panel .wind-key .wind-low:before{background:#237342} #weather-panel .wind-key .wind-medium:before{background:#e5bf00} #weather-panel .wind-key .wind-high:before{background:#b52e34} /* Reserve space for the 60px header controls on phones. */ @media(max-width:1024px){body>header{height:76px;min-height:76px}main{height:calc(100dvh - 76px)}} @media(max-width:380px){body>header{gap:5px;padding-left:8px;padding-right:8px}body>header .horus-logo{width:32px}body>header #app-menu-button{min-width:70px;padding:0 8px}body>header .header-weather button{min-width:58px}} .login-logo{display:block;width:96px;height:72px;object-fit:contain;margin:0 auto 16px}#login-gate h2{text-align:center}#account-dialog .login-logo{display:none} /* Align the logo image box with the 60px Menu button. */ body>header .horus-logo{height:60px;min-height:60px;max-height:60px;object-fit:contain;align-self:center} /* Foldable outer-screen header: preserve readable values and logo proportions. */ @media(max-width:600px){body>header{height:72px;min-height:72px;padding:6px 8px;gap:6px}main{height:calc(100dvh - 72px)}body>header .brand{flex:0 0 60px;width:60px;min-width:60px;margin:0}body>header .horus-logo{width:60px;height:60px;min-height:60px;max-height:60px}body>header .brand-title{display:none}body>header .header-weather{margin-left:auto;min-width:0;flex:1;height:60px}body>header .header-weather button{min-width:0;flex:1;padding:2px;display:grid}body>header .header-weather small{font-size:12px}body>header .header-weather .header-wind-badge{padding:0 3px}body>header #app-menu-button{width:62px;min-width:62px;padding:0 6px;font-size:12px;gap:4px}} @media(min-width:601px){body>header .horus-logo{width:110px;height:60px;min-height:60px}} @media(max-width:340px){body>header .brand{flex-basis:50px;width:50px;min-width:50px}body>header .horus-logo{width:50px}body>header #app-menu-button{width:52px;min-width:52px}body>header #app-menu-button>span{display:none}body>header .header-weather small{font-size:11px}} /* Map-first guidance: compact instruction and bottom controls. */ body.driving #driving-panel{position:absolute;inset:0;width:auto;max-width:none;padding:0;margin:0;background:none;border:0;box-shadow:none;pointer-events:none;z-index:30}#driving-panel .drive-banner{position:absolute;top:12px;left:12px;right:12px;background:#234f40;color:white;border-radius:14px;display:flex;align-items:center;gap:14px;padding:14px 16px;box-shadow:0 3px 12px #183d3920;pointer-events:auto}#driving-panel .drive-symbol{font-size:28px;flex:0 0 30px}#driving-panel .drive-progress{font-size:19px;line-height:1.3;display:block}#driving-panel .drive-detail{font-size:12px;line-height:1.4;color:#e0eadf;margin-top:5px}#driving-panel .drive-bottom{position:absolute;bottom:12px;left:12px;right:12px;border-radius:14px;background:#f8faf5;box-shadow:0 3px 12px #183d3930;padding:12px 16px;pointer-events:auto}#driving-panel .drive-summary{display:flex;align-items:center;justify-content:space-between;gap:12px}#driving-panel .drive-target{font-size:15px;font-weight:600;margin:0}#driving-panel #drive-exit{width:auto;min-width:64px;min-height:44px;padding:8px 16px;border-radius:9px;background:#234f40;color:white;border:0;font:inherit}#driving-panel .drive-more summary{font-size:12px;cursor:pointer;padding:8px 0;color:#526c5f}#driving-panel .drive-direction,#driving-panel .drive-warning{font-size:12px;margin:6px 0;line-height:1.5}#driving-panel .drive-controls{display:flex;margin-top:8px}#driving-panel #drive-north{min-height:44px;font-size:13px;padding:8px 14px}#driving-panel #drive-recenter{position:absolute;right:14px;bottom:144px;width:48px;height:48px;min-height:48px;padding:0;border-radius:50%;border:1px solid #bbcdb9;background:white;color:#234f40;font-size:27px;pointer-events:auto}#driving-panel .drive-more[open]{max-height:30dvh;overflow:auto}@media(min-width:700px){#driving-panel .drive-banner{right:auto;width:420px}#driving-panel .drive-bottom{right:auto;width:340px}} .windy-shortcuts{padding:16px;border:1px solid #cbd8c9;border-radius:14px;margin-bottom:20px;background:#f1f5ed}.windy-shortcuts button{display:block;width:100%;min-height:48px;margin:8px 0;border-radius:10px}.windy-shortcuts .windy-open:not([hidden]){display:block;padding:14px;background:#234f40;color:white;border-radius:10px;text-align:center;text-decoration:none}.windy-shortcuts p{font-size:13px} /* Weather review: consistent controls, compact hierarchy and narrow-screen layout. */ #weather-panel{width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 24px);box-sizing:border-box;padding:20px;border-radius:20px;scroll-padding-top:88px} #weather-panel .menu-heading{position:sticky;top:-20px;background:#f8faf5;z-index:2;padding:14px 0;border-bottom:1px solid #d7e1d4;margin-bottom:16px} #weather-panel .menu-heading button{width:44px;height:44px;min-height:44px;flex-shrink:0} #weather-panel button,#weather-panel summary,#weather-panel a{touch-action:manipulation} #weather-panel button:focus-visible,#weather-panel a:focus-visible,#weather-panel summary:focus-visible{outline:3px solid #387eaa;outline-offset:3px} #weather-panel button:disabled{opacity:.55;cursor:wait} #weather-panel .weather-location{font-size:16px;font-weight:600;margin:0 0 6px} #weather-panel .weather-overview>[role=status]{font-size:13px;line-height:1.5} #weather-panel .weather-refresh{min-height:44px;width:auto;padding:8px 18px;border:1px solid #b7cbb9;border-radius:10px;background:#fff;color:#234f40;font:inherit;font-size:14px} #weather-panel .weather-nav{gap:8px;margin:18px 0} #weather-panel .weather-nav button{min-width:0;min-height:98px;padding:12px 6px;border-radius:12px;font-size:15px} #weather-panel .weather-nav button span{font-size:11px;line-height:1.4} #weather-panel .weather-nav-icon{width:24px;height:24px;flex-shrink:0} #weather-panel .windy-shortcuts{padding:16px;background:#eef4ea;border:1px solid #cbd8c9;border-radius:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px} #weather-panel .windy-shortcuts h3,#weather-panel .windy-shortcuts p,#weather-panel .windy-shortcuts a{grid-column:1/-1;margin:0} #weather-panel .windy-shortcuts h3{font-size:19px} #weather-panel .windy-shortcuts button{margin:0;min-height:52px;padding:12px 10px;border:1px solid #b9cbb7;background:white;color:#234f40;font:inherit;font-size:14px;font-weight:600;border-radius:10px} #weather-panel .windy-shortcuts button:hover{background:#e1ecdb} #weather-panel .windy-status:empty{display:none} #weather-panel .radar-snapshot{border-top:1px solid #d3dfcf;padding-top:14px} #weather-panel .radar-snapshot summary{padding:12px 0;font-weight:600;font-size:14px;cursor:pointer} #weather-panel .radar-refresh,#weather-panel .lightning-check{min-height:48px;padding:12px 16px;border:0;border-radius:10px;background:#234f40;color:white;font:inherit;font-weight:600} #weather-panel .lightning-location{display:flex;gap:8px;border:0;padding:0;flex-wrap:wrap} #weather-panel .lightning-location legend{font-size:13px;margin-bottom:8px} #weather-panel .lightning-location label{flex:1;padding:12px;border:1px solid #bccdb9;border-radius:10px;font-size:14px;white-space:nowrap} #weather-panel .lightning-location label:has(input:checked){background:#e2eddd;border-color:#234f40} #weather-panel .lightning-target{font-size:13px;overflow-wrap:anywhere} #weather-panel .hour-card{min-width:88px}#weather-panel .hour-card time{font-size:14px}#weather-panel .hour-card small{font-size:12px} @media(max-width:400px){#weather-panel{padding:14px}#weather-panel .menu-heading{top:-14px}#weather-panel .weather-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}#weather-panel .weather-metrics>div{border:0}#weather-panel .windy-shortcuts{grid-template-columns:1fr}#weather-panel .weather-nav button span{display:none}#weather-panel .weather-nav button{min-height:80px}#weather-panel .daily-card{gap:8px}#weather-panel .daily-condition small{font-size:11px}} /* One radar destination, without nested cards or duplicate controls. */ #weather-panel .windy-shortcuts{padding:0;border:0;background:none;margin:0;gap:12px} #weather-panel .windy-shortcuts p{color:#526c5f;font-size:13px} /* Single-page flight weather workspace. */ #weather-panel{width:calc(100vw - 32px);max-width:1180px;max-height:calc(100dvh - 32px);padding:0;border-radius:18px} #weather-panel>.menu-heading{top:0;padding:14px 20px;margin:0;position:sticky;background:#f5f7f2} #weather-panel .weather-eyebrow{font-size:10px}#weather-panel .menu-heading h2{font-size:23px} #weather-panel .weather-workspace{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr);gap:14px;padding:16px;align-items:start} #weather-panel .weather-workspace>section{margin:0;padding:16px;min-width:0;background:white;border:1px solid #d6dfd5;border-radius:12px;box-sizing:border-box} #weather-panel .weather-overview{grid-column:1;grid-row:1} #weather-panel #weather-forecast-view{grid-column:1;grid-row:2/4} #weather-panel #weather-radar-view{grid-column:2;grid-row:1} #weather-panel #weather-lightning-view{grid-column:2;grid-row:2/4} #weather-panel .weather-workspace h3{font-size:17px;margin:0 0 10px} #weather-panel .weather-now{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;padding:12px 0;gap:12px} #weather-panel .weather-now>strong{font-size:32px;white-space:nowrap}#weather-panel .temperature-unit{font-size:20px} #weather-panel .weather-condition{flex-direction:row;text-align:left;font-size:20px;font-weight:600;gap:10px} #weather-panel .weather-metrics{padding:12px 0;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px} #weather-panel .weather-metrics small{font-size:12px;margin:0}#weather-panel .weather-metrics strong{font-size:18px} #weather-panel .wind-key{margin:8px 0;gap:6px}#weather-panel .wind-key span{font-size:11px;padding:3px 7px;min-height:24px} #weather-panel .weather-refresh{margin:6px 0 0;min-height:40px} #weather-panel .weather-footnote{margin:8px 0 0;font-size:12px} #weather-panel .hourly-cards{margin:0;gap:8px}#weather-panel .hour-card{padding:10px 8px;min-width:78px} #weather-panel .forecast-hint{font-size:11px;font-weight:400}#weather-panel .forecast-units{font-size:12px;margin:8px 0} #weather-panel .weather-outlook{border-top:1px solid #d6dfd5;margin-top:12px;padding-top:8px} #weather-panel .weather-outlook summary{font-size:15px;font-weight:600;padding:10px 0;cursor:pointer} #weather-panel .lightning-panel fieldset{margin:8px 0}#weather-panel .lightning-panel>p{font-size:13px;margin:6px 0} #weather-panel .lightning-results{margin:10px 0;padding:10px;border-radius:8px;font-size:13px} #weather-panel .lightning-panel>small{font-size:12px;line-height:1.5;margin:8px 0} #weather-panel .lightning-panel>a,#weather-panel>a{font-size:11px;display:block;margin:8px 16px 12px} #weather-panel .lightning-panel>a{margin:8px 0 0}#weather-panel .lightning-card{padding:10px 6px}#weather-panel .lightning-number{font-size:30px} @media(max-width:760px){#weather-panel{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);border-radius:12px}#weather-panel .weather-workspace{display:flex;flex-direction:column;padding:10px;gap:10px}#weather-panel .weather-workspace>section{width:100%;padding:12px}#weather-panel .weather-overview{order:0}#weather-panel #weather-forecast-view{order:1}#weather-panel #weather-radar-view{order:2}#weather-panel #weather-lightning-view{order:3}#weather-panel>.menu-heading{padding:10px 14px}#weather-panel .weather-condition{font-size:17px}#weather-panel .weather-now>strong{font-size:28px}} @media(max-width:400px){#weather-panel .weather-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#weather-panel .windy-shortcuts{grid-template-columns:1fr 1fr}#weather-panel .windy-shortcuts button{font-size:13px;padding:10px 6px}#weather-panel .wind-key span{font-size:10px}} /* Use the outer screen width without stacked dialog padding. */ @media(max-width:760px){#weather-panel{padding:0!important;width:calc(100vw - 8px);max-width:none;max-height:calc(100dvh - 8px)}#weather-panel .weather-workspace{padding:6px;gap:8px}#weather-panel .weather-workspace>section{padding:10px;margin:0}#weather-panel>.menu-heading{padding:10px 12px}#weather-panel .weather-overview{margin:0}#weather-panel .wind-key{gap:4px}#weather-panel .wind-key span{padding:3px 5px}} #weather-wtg-picker{box-sizing:border-box;width:min(440px,calc(100vw - 20px));max-height:80dvh;padding:16px;border:1px solid #cbd8c9;border-radius:14px;background:#f8faf5;color:#183d39} #weather-wtg-picker::backdrop{background:#183d3960}#weather-wtg-picker .picker-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}#weather-wtg-picker h3{margin:0;font-size:20px}#weather-wtg-picker button{min-height:48px;border:1px solid #bccdb9;border-radius:8px;background:white;color:inherit;font:inherit;padding:10px 14px}#weather-wtg-picker input{box-sizing:border-box;width:100%;font:inherit;padding:12px;margin:12px 0;border:1px solid #bccdb9;border-radius:8px}#weather-wtg-picker .picker-list{display:grid;gap:8px;max-height:50dvh;overflow:auto}#weather-wtg-picker .picker-list button{text-align:left}#weather-wtg-picker button:focus-visible{outline:3px solid #387eaa} #weather-wtg-picker label{display:block;margin-top:14px;font-size:13px}#weather-wtg-picker select{box-sizing:border-box;width:100%;min-height:48px;margin-top:6px;padding:10px;font:inherit;color:inherit;background:white;border:1px solid #bccdb9;border-radius:8px}#weather-panel .windy-shortcuts .weather-change-wtg{grid-column:1/-1;min-height:44px;background:transparent;font-weight:400;font-size:13px} #weather-panel .weather-location-step{padding:20px;margin:0}#weather-panel .weather-location-step button{display:block;width:100%;min-height:52px;margin:12px 0;border:1px solid #bccdb9;border-radius:10px;background:white;color:#183d39;font:inherit}#weather-panel .weather-change-location{margin:12px 16px 0;padding:10px 14px;min-height:44px;border:1px solid #bccdb9;border-radius:10px;background:white;color:#183d39;font:inherit}#weather-panel .open-windy{width:100%;min-height:48px;border:0;border-radius:10px;background:#234f40;color:white;font:inherit} /* Combined driving card, with map kept visible below. */ #driving-panel .drive-banner{display:block;box-sizing:border-box;max-width:480px;padding:12px 14px} #driving-panel .drive-summary{margin-bottom:6px}#driving-panel .drive-target{font-size:15px;color:white} #driving-panel #drive-exit{min-height:40px;padding:6px 12px;background:#ffffff20;color:white;border:1px solid #ffffff60} #driving-panel .drive-progress{font-size:20px}#driving-panel .drive-trip{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:8px 0;font-size:15px;font-weight:600} #driving-panel .drive-speed{margin-left:auto;background:#ffffff20;border-radius:6px;padding:4px 7px;font-size:13px} #driving-panel .drive-actions{display:flex;gap:8px;margin-top:10px} #driving-panel .drive-actions button,#driving-panel #drive-north{position:static;width:auto;height:auto;min-height:44px;flex:1;padding:8px 12px;border:1px solid #ffffff60;border-radius:8px;background:transparent;color:white;font:inherit;font-size:14px} #driving-panel .drive-more summary{color:#e0eadf;padding:8px 0 0}#driving-panel .drive-more small{display:block;font-size:11px;line-height:1.4;margin-top:8px} @media(max-width:600px){#driving-panel .drive-banner{left:8px;right:8px;top:8px;width:auto;max-width:none}#driving-panel .drive-detail{font-size:12px}} /* Compact guidance with separate map controls. */ body.driving #driving-panel .drive-banner{padding:10px 12px;border-radius:12px} body.driving #driving-panel .drive-summary{margin-bottom:3px} body.driving #driving-panel .drive-target{font-size:14px} body.driving #driving-panel .drive-progress{font-size:19px;line-height:1.25} body.driving #driving-panel .drive-trip{margin:6px 0;gap:10px;font-size:14px} body.driving #driving-panel .drive-detail{font-size:12px;margin-top:3px} body.driving #driving-panel .drive-more summary{font-size:12px;padding-top:5px} body.driving #driving-panel .drive-map-buttons{position:absolute;right:12px;bottom:24px;display:grid;gap:10px;pointer-events:auto} body.driving #driving-panel .drive-map-buttons button{position:static;display:flex;align-items:center;justify-content:center;width:48px;height:48px;min-height:48px;padding:0;border-radius:12px;border:1px solid #b7c9bc;background:#f8faf5;color:#234f40;box-shadow:0 2px 6px #183d3920} body.driving #driving-panel .drive-map-buttons svg{width:24px;height:24px;flex-shrink:0} body.driving #driving-panel .drive-map-buttons button:focus-visible{outline:3px solid #2475e8;outline-offset:3px} /* Navigation hierarchy: destination, distance, then arrival. */ body.driving #driving-panel .drive-banner{background:#214c3e;padding:14px 16px;border-radius:16px;box-shadow:0 4px 16px #183d3925} body.driving #driving-panel .drive-summary{display:flex;align-items:center;margin:0 0 10px;gap:12px} body.driving #driving-panel .drive-target{font-size:14px;font-weight:600;letter-spacing:.3px;color:#dce9e0} body.driving #driving-panel #drive-exit{min-width:44px;min-height:44px;padding:6px 12px;font-size:14px;background:#ffffff12;border:1px solid #ffffff40;border-radius:8px} body.driving #driving-panel .drive-main{display:flex;align-items:center;justify-content:space-between;gap:12px} body.driving #driving-panel .drive-progress{font-size:23px;line-height:1.2;font-weight:700;min-width:0} body.driving #driving-panel .drive-speed{flex-shrink:0;margin:0;padding:6px 8px;font-size:12px;font-weight:600;background:#ffffff15;border:1px solid #ffffff25;border-radius:8px;white-space:nowrap} body.driving #driving-panel .drive-trip{display:flex;gap:16px;font-size:15px;line-height:1.4;margin:8px 0 0;color:#fff} body.driving #driving-panel .drive-duration{color:#dce9e0} body.driving #driving-panel .drive-detail{font-size:12px;color:#dce9e0;margin-top:8px} body.driving #driving-panel .drive-more summary{font-size:11px;color:#c1d6c9;padding-top:8px} body.driving #driving-panel .drive-map-buttons{position:absolute;right:12px;bottom:24px;display:flex;flex-direction:column;gap:0;padding:0;background:#fbfdf9;border:1px solid #b9ccbc;border-radius:14px;box-shadow:0 3px 10px #183d3925;overflow:hidden} body.driving #driving-panel .drive-map-buttons #drive-recenter,body.driving #driving-panel .drive-map-buttons #drive-overview{position:static;inset:auto;display:flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:48px;min-height:48px;margin:0;padding:0;flex:none;border:0;border-radius:0;background:transparent;color:#214c3e;box-shadow:none;font-size:0} body.driving #driving-panel .drive-map-buttons #drive-overview{border-top:1px solid #d5e0d3} body.driving #driving-panel .drive-map-buttons button:hover{background:#e6eee2} @media(max-width:400px){body.driving #driving-panel .drive-banner{padding:10px 12px}body.driving #driving-panel .drive-summary{margin-bottom:6px}body.driving #driving-panel .drive-progress{font-size:20px}body.driving #driving-panel .drive-trip{font-size:14px}} /* Minimal guidance: route essentials only, speed on the map. */ body.driving #driving-panel .drive-banner{padding:10px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px} body.driving #driving-panel .drive-summary{grid-column:1/-1;margin:0;min-height:36px} body.driving #driving-panel .drive-target{font-size:14px;letter-spacing:0} body.driving #driving-panel #drive-exit{min-height:44px;padding:6px 10px;border:0;background:transparent;color:#e1ece5;text-decoration:underline} body.driving #driving-panel .drive-main{grid-column:1/-1} body.driving #driving-panel .drive-progress{font-size:22px;line-height:1.2} body.driving #driving-panel .drive-trip{grid-column:1;display:flex;flex-wrap:wrap;margin:4px 0 0;gap:10px;font-size:14px;align-self:center} body.driving #driving-panel .drive-detail{grid-column:1/-1;margin-top:6px;padding-top:6px;border-top:1px solid #ffffff25} body.driving #driving-panel .drive-detail[hidden]{display:none} body.driving #driving-panel .drive-more{grid-column:2;grid-row:3;align-self:center} body.driving #driving-panel .drive-more summary{padding:6px 0;font-size:12px} body.driving #driving-panel .drive-more[open]{grid-column:1/-1;grid-row:auto} body.driving #driving-panel>.drive-speed{position:absolute;left:12px;bottom:24px;display:block;background:#fbfdf9;color:#214c3e;border:1px solid #b9ccbc;border-radius:10px;padding:10px;font-size:15px;box-shadow:0 2px 6px #183d3920} body.driving #driving-panel{font-family:"Horus Avenir","Avenir Next","Segoe UI",Arial,sans-serif} body.driving #driving-panel .drive-target{font-size:16px;font-weight:600} body.driving #driving-panel .drive-progress{font-size:22px;font-weight:700} body.driving #driving-panel .drive-trip{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums} body.driving #driving-panel .drive-detail{font-size:14px} body.driving #driving-panel .drive-more summary{font-size:14px} body.driving #driving-panel .drive-map-buttons #drive-north{position:static;display:flex;align-items:center;justify-content:center;width:48px;height:48px;min-height:48px;flex:none;padding:0;margin:0;border:0;border-radius:0;background:transparent;color:#214c3e;font:600 16px "Horus Avenir",sans-serif} body.driving #driving-panel .drive-map-buttons #drive-recenter{border-top:1px solid #d5e0d3} /* Separate navigation actions to reduce accidental taps. */ body.driving #driving-panel .drive-more{grid-column:1/-1;grid-row:auto;justify-self:start;margin-top:8px} body.driving #driving-panel .drive-more summary{box-sizing:border-box;min-height:44px;min-width:72px;padding:12px 8px;font-size:14px;cursor:pointer} body.driving #driving-panel #drive-exit{min-width:64px;min-height:48px;padding:10px 12px;border:1px solid #ffffff40;border-radius:8px;text-decoration:none} body.driving #driving-panel .drive-more[open]{justify-self:stretch} /* Shared action row; details on a distinct light surface. */ body.driving #driving-panel .drive-banner{position:absolute;display:grid;grid-template-columns:minmax(0,1fr) auto} body.driving #driving-panel .drive-summary{display:contents} body.driving #driving-panel .drive-target{grid-column:1/-1;grid-row:1;padding:2px 0 6px} body.driving #driving-panel .drive-main{grid-column:1/-1;grid-row:2} body.driving #driving-panel .drive-trip{grid-column:1/-1;grid-row:3} body.driving #driving-panel .drive-detail{grid-column:1/-1;grid-row:4} body.driving #driving-panel .drive-more{display:contents} body.driving #driving-panel .drive-more summary{grid-column:1;grid-row:5;justify-self:start;min-height:44px;min-width:72px;padding:12px 0;margin:0} body.driving #driving-panel #drive-exit{grid-column:2;grid-row:5;justify-self:end;align-self:center;min-height:44px;min-width:64px;padding:8px 12px} body.driving #driving-panel .drive-more[open]{display:contents} body.driving #driving-panel .drive-info{grid-column:1/-1;grid-row:6;background:#eef3e9;color:#234f40;border-radius:9px;padding:10px 12px;margin-top:4px;max-height:25dvh;overflow:auto} body.driving #driving-panel .drive-info .drive-direction,body.driving #driving-panel .drive-info .drive-warning{color:#234f40;font-size:14px;line-height:1.5;margin:0} body.driving #driving-panel .drive-info .drive-warning:not(:empty){margin-top:5px} body.driving #driving-panel .drive-more:not([open]) .drive-info{display:none} body.driving #driving-panel .drive-map-buttons #drive-north svg{width:24px;height:24px;flex-shrink:0}body.driving #driving-panel .drive-map-buttons #drive-north[aria-pressed=true]{background:#dce9d7;color:#183d39} /* Clean two-row navigation card. */ body.driving #driving-panel .drive-banner{grid-template-columns:minmax(0,1fr) auto auto;gap:8px 10px;padding:12px 14px;border-radius:14px} body.driving #driving-panel .drive-target{grid-column:1;grid-row:1;align-self:center;padding:0;font-size:15px;font-weight:500;letter-spacing:0} body.driving #driving-panel .drive-more summary{grid-column:2;grid-row:1;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;display:flex;align-items:center;justify-content:center;font-size:22px;border-radius:8px;list-style:none;margin:0;color:#dce9e0} body.driving #driving-panel .drive-more summary::-webkit-details-marker{display:none} body.driving #driving-panel #drive-exit{grid-column:3;grid-row:1;min-width:56px;min-height:44px;padding:6px 10px;font-size:14px;background:#ffffff0d;border:1px solid #ffffff30} body.driving #driving-panel .drive-main{grid-column:1/-1;grid-row:2;padding-top:8px;border-top:1px solid #ffffff20} body.driving #driving-panel .drive-progress{font-size:23px;font-weight:600;line-height:1.2} body.driving #driving-panel .drive-trip{grid-column:1/-1;grid-row:3;margin:0;gap:12px;font-size:15px;font-weight:500;line-height:1.4} body.driving #driving-panel .drive-duration{font-weight:400;color:#d5e3db} body.driving #driving-panel .drive-detail{grid-column:1/-1;grid-row:4} body.driving #driving-panel .drive-info{grid-column:1/-1;grid-row:5} @media(min-width:480px){body.driving #driving-panel .drive-main{grid-column:1;grid-row:2;border:0;padding:0}body.driving #driving-panel .drive-trip{grid-column:2/4;grid-row:2;align-self:center;justify-content:flex-end;font-size:14px;gap:8px}body.driving #driving-panel .drive-progress{font-size:21px}} /* Navigation reference layout: destination above, trip progress below. */ body.driving #driving-panel .drive-destination-bar{position:absolute;top:10px;left:12px;right:12px;max-width:460px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box;background:#214c3e;color:white;border-radius:12px;padding:4px 14px;pointer-events:auto;box-shadow:0 2px 8px #183d3920} body.driving #driving-panel .drive-destination-bar .drive-target{font-size:16px;font-weight:600;padding:0} body.driving #driving-panel .drive-destination-bar .drive-more{display:block;position:relative;margin:0} body.driving #driving-panel .drive-destination-bar summary{display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:0;margin:0;font-size:22px;list-style:none;cursor:pointer} body.driving #driving-panel .drive-destination-bar .drive-info{position:absolute;right:0;top:48px;width:260px;max-width:75vw;background:#f4f7ef;color:#234f40;border:1px solid #c8d7c5;border-radius:10px;padding:12px;box-shadow:0 4px 12px #183d3930;z-index:2} body.driving #driving-panel .drive-trip-bar{position:absolute;bottom:10px;left:12px;right:12px;max-width:460px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fbfcf8;color:#183d39;border:1px solid #d0ddcc;border-radius:14px;padding:12px 16px;pointer-events:auto;box-shadow:0 3px 12px #183d3925} body.driving #driving-panel .drive-trip-copy{min-width:0} body.driving #driving-panel .drive-trip-bar .drive-duration{display:block;font-size:26px;font-weight:700;color:#214c3e;line-height:1.2} body.driving #driving-panel .drive-trip-secondary{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px} body.driving #driving-panel .drive-trip-bar .drive-progress,body.driving #driving-panel .drive-trip-bar .drive-eta{font-size:14px;font-weight:500;line-height:1.4;color:#52695d} body.driving #driving-panel .drive-trip-bar #drive-exit{flex-shrink:0;min-width:60px;min-height:48px;border:1px solid #bccfbd;background:#eef3e9;color:#234f40;border-radius:10px;font-size:14px;text-decoration:none} body.driving #driving-panel .drive-trip-bar .drive-detail{color:#864b20;font-size:13px;border:0;padding:0;margin-top:6px} body.driving #driving-panel .drive-map-buttons{bottom:130px} body.driving #driving-panel>.drive-speed{bottom:130px} /* Tesla-inspired light route panel, adapted for a narrow phone. */ body.driving #driving-panel .drive-route-panel{position:absolute;top:10px;left:12px;right:12px;max-width:460px;background:#fafbf9;color:#202720;border-radius:12px;box-shadow:0 4px 18px #183d3925;pointer-events:auto;padding:0 16px;box-sizing:border-box} body.driving #driving-panel .drive-route-panel .drive-destination-bar{position:static;display:flex;max-width:none;padding:4px 0;border-radius:0;background:transparent;color:#202720;box-shadow:none;border-bottom:1px solid #dde2da} body.driving #driving-panel .drive-route-panel .drive-target{color:#202720;font-size:16px;font-weight:600} body.driving #driving-panel .drive-route-panel summary{color:#627064} body.driving #driving-panel .drive-route-panel .drive-trip-bar{position:static;max-width:none;border:0;box-shadow:none;background:transparent;padding:12px 0;gap:12px;border-radius:0;align-items:center} body.driving #driving-panel .drive-route-panel .drive-trip-copy{flex:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px} body.driving #driving-panel .drive-route-panel .drive-duration{font-size:22px;line-height:1.2;color:#202720;font-weight:600;white-space:nowrap} body.driving #driving-panel .drive-route-panel .drive-trip-secondary{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0} body.driving #driving-panel .drive-route-panel .drive-progress,body.driving #driving-panel .drive-route-panel .drive-eta{font-size:14px;color:#5b665e;font-weight:500} body.driving #driving-panel .drive-route-panel #drive-exit{min-width:56px;min-height:44px;padding:8px;border:0;background:#e9ede6;color:#202720;border-radius:8px} body.driving #driving-panel .drive-route-panel .drive-detail{flex-basis:100%;margin:4px 0 0} body.driving #driving-panel .drive-map-buttons,body.driving #driving-panel>.drive-speed{bottom:24px} /* Bottom-left trip card: green route header, white arrival section. */ body.driving #driving-panel .drive-route-panel{top:auto;bottom:12px;left:12px;right:auto;width:340px;max-width:calc(100% - 84px);padding:0;overflow:visible;background:#fafbf9;border-radius:12px} body.driving #driving-panel .drive-route-panel .drive-destination-bar{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 14px;background:#214c3e;border:0;border-radius:12px 12px 0 0} body.driving #driving-panel .drive-route-panel .drive-target,body.driving #driving-panel .drive-route-panel .drive-progress{color:#f2f7f1;font-size:14px;font-weight:500;line-height:1.35} body.driving #driving-panel .drive-route-panel .drive-trip-bar{padding:12px 14px;gap:10px} body.driving #driving-panel .drive-route-panel .drive-trip-copy{display:flex;flex-direction:column;align-items:flex-start;gap:4px} body.driving #driving-panel .drive-route-panel .drive-duration{font-size:20px;font-weight:600} body.driving #driving-panel .drive-route-panel .drive-eta{font-size:15px;color:#52695d} body.driving #driving-panel .drive-route-panel .drive-more,body.driving #driving-panel .drive-route-panel .drive-more[open]{display:block;position:static;margin:0;max-height:none;overflow:visible;padding:0 14px 6px} body.driving #driving-panel .drive-route-panel .drive-more summary{display:list-item;width:auto;height:auto;min-width:0;min-height:44px;box-sizing:border-box;padding:12px 0;list-style:disclosure-closed;color:#52695d;font-size:13px} body.driving #driving-panel .drive-route-panel .drive-more[open] summary{list-style:disclosure-open} body.driving #driving-panel .drive-route-panel .drive-info{position:static;width:auto;max-width:none;max-height:25dvh;overflow:auto;display:block;margin:0 0 8px;padding:10px;background:#eaf0e5;border:0;border-radius:8px;color:#234f40;box-shadow:none} body.driving #driving-panel .drive-route-panel .drive-more:not([open]) .drive-info{display:none} body.driving #driving-panel>.drive-speed{bottom:auto;top:12px;left:12px} /* Align trip readings into labelled columns. */ body.driving #driving-panel .drive-route-panel .drive-destination-bar{gap:3px;padding:12px 14px} body.driving #driving-panel .drive-route-panel .drive-target{font-size:15px;font-weight:600} body.driving #driving-panel .drive-route-panel .drive-progress{font-size:13px;font-weight:400;color:#dce9e0} body.driving #driving-panel .drive-route-panel .drive-trip-bar{display:flex;align-items:center;padding:12px 14px} body.driving #driving-panel .drive-route-panel .drive-trip-copy{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;flex:1} body.driving #driving-panel .drive-time-cell{display:flex;flex-direction:column;gap:4px;min-width:0} body.driving #driving-panel .drive-time-cell small{font-size:11px;color:#617065;line-height:1.3;margin:0} body.driving #driving-panel .drive-route-panel .drive-duration,body.driving #driving-panel .drive-route-panel .drive-eta{font-size:18px;font-weight:600;line-height:1.3;white-space:nowrap;color:#214c3e;font-variant-numeric:tabular-nums} body.driving #driving-panel .drive-route-panel .drive-detail{grid-column:1/-1} @media(max-width:400px){body.driving #driving-panel .drive-route-panel .drive-trip-bar{flex-wrap:wrap}body.driving #driving-panel .drive-route-panel .drive-trip-copy{flex-basis:100%}body.driving #driving-panel .drive-route-panel #drive-exit{margin-left:auto}} /* Single-line destination and map-level driving status. */ body.driving #driving-panel .drive-route-panel .drive-destination-bar{flex-direction:row;align-items:center;justify-content:space-between;gap:12px} body.driving #driving-panel .drive-route-panel .drive-target{font-size:13px;min-width:0} body.driving #driving-panel .drive-route-panel .drive-progress{font-size:12px;text-align:right;white-space:nowrap} body.driving #driving-panel .drive-map-status{position:absolute;top:12px;left:12px;max-width:calc(100% - 24px);box-sizing:border-box;border:1px solid #c6d5c2;border-radius:10px;background:#f8faf5;padding:9px 12px;box-shadow:0 2px 8px #183d3920;color:#214c3e} body.driving #driving-panel .drive-road-status{font-size:12px;color:#795421;margin-bottom:6px;line-height:1.4} body.driving #driving-panel .drive-live-readings{display:flex;gap:14px;align-items:center} body.driving #driving-panel .drive-map-status .drive-speed{position:static;background:none;border:0;border-radius:0;padding:0;margin:0;font-size:18px;font-weight:600;box-shadow:none;color:#214c3e} body.driving #driving-panel .drive-gps{font-size:13px;color:#52695d} /* Keep the bottom card shallow and reserve space for the car. */ body.driving #driving-panel .drive-route-panel .drive-trip-bar{flex-wrap:nowrap!important;padding:10px 14px;gap:12px} body.driving #driving-panel .drive-route-panel .drive-trip-copy{flex:1 1 auto!important;width:auto;gap:8px;min-width:0} body.driving #driving-panel .drive-route-panel #drive-exit{margin:0!important;min-width:48px;min-height:44px;flex:0 0 auto;padding:6px 10px} body.driving #driving-panel .drive-route-panel .drive-more{padding:0 14px 0!important} body.driving #driving-panel .drive-route-panel .drive-more summary{min-height:36px;height:36px;padding:8px 0;font-size:12px} body.driving #driving-panel .drive-route-panel .drive-destination-bar{padding:8px 14px} body.driving #driving-panel .drive-route-panel .drive-duration,body.driving #driving-panel .drive-route-panel .drive-eta{font-size:18px} /* Align the bottom route card with the three map controls. */ body.driving #driving-panel .drive-route-panel{bottom:12px;min-height:146px;display:flex;flex-direction:column;justify-content:center} body.driving #driving-panel .drive-route-panel .drive-destination-bar{flex:0 0 auto} body.driving #driving-panel .drive-route-panel .drive-trip-bar{flex:1;align-items:center} body.driving #driving-panel .drive-map-buttons{bottom:12px;height:146px;box-sizing:border-box;justify-content:center} body.driving #driving-panel .drive-map-buttons button{box-sizing:border-box} /* Two matched lower controls, separate compass. */ body.driving #driving-panel .drive-route-panel{min-height:98px;height:auto;justify-content:flex-start} body.driving #driving-panel .drive-route-panel .drive-destination-bar{padding:7px 12px} body.driving #driving-panel .drive-route-panel .drive-trip-bar{padding:7px 12px;min-height:62px;box-sizing:border-box} body.driving #driving-panel .drive-map-buttons{height:98px;bottom:12px} body.driving #driving-panel .drive-map-buttons #drive-recenter{border-top:0} body.driving #driving-panel>#drive-north{position:absolute;top:12px;right:12px;display:flex;align-items:center;justify-content:center;width:48px;height:48px;min-height:48px;padding:0;border:1px solid #b9ccbc;border-radius:12px;background:#fbfdf9;color:#214c3e;box-shadow:0 2px 8px #183d3920;pointer-events:auto} body.driving #driving-panel>#drive-north[aria-pressed=true]{background:#dce9d7} body.driving #driving-panel>#drive-north svg{width:24px;height:24px} body.driving #driving-panel .drive-map-status{max-width:calc(100% - 84px)} /* Keep Exit away from map controls and prioritise readable trip values. */ body.driving #driving-panel .drive-route-panel .drive-trip-bar{flex-direction:row-reverse;gap:12px} body.driving #driving-panel .drive-route-panel #drive-exit{min-width:48px;min-height:48px;font-size:14px} body.driving #driving-panel .drive-route-panel .drive-target{font-size:14px;font-weight:600} body.driving #driving-panel .drive-route-panel .drive-progress{font-size:13px} body.driving #driving-panel .drive-time-cell small{font-size:12px} body.driving #driving-panel .drive-route-panel .drive-duration,body.driving #driving-panel .drive-route-panel .drive-eta{font-size:20px;font-weight:600} /* Centre the paired time readings in the space beside Exit. */ body.driving #driving-panel .drive-route-panel .drive-trip-copy{display:grid;grid-template-columns:max-content max-content;justify-content:center;align-content:center;align-items:center;column-gap:18px;flex:1 1 auto!important} body.driving #driving-panel .drive-time-cell{align-items:center;text-align:center} body.driving #driving-panel .drive-route-panel .drive-detail{text-align:center} @media(max-width:400px){body.driving #driving-panel .drive-route-panel .drive-trip-copy{column-gap:10px}} body.driving #driving-panel .drive-route-panel .drive-trip-copy{column-gap:28px} @media(max-width:400px){body.driving #driving-panel .drive-route-panel .drive-trip-copy{column-gap:20px}} /* Match the top status and compass control heights. */ body.driving #driving-panel .drive-map-status{min-height:64px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center} body.driving #driving-panel>#drive-north{height:64px;min-height:64px;box-sizing:border-box;top:12px} /* Single-line driving status. */ body.driving #driving-panel .drive-map-status{height:48px;min-height:48px;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:8px 10px;white-space:nowrap} body.driving #driving-panel .drive-road-status{margin:0;font-size:11px;overflow:hidden;text-overflow:ellipsis;min-width:0} body.driving #driving-panel .drive-live-readings{gap:10px;flex-shrink:0} body.driving #driving-panel .drive-map-status .drive-speed{font-size:16px} body.driving #driving-panel .drive-gps{font-size:12px} body.driving #driving-panel>#drive-north{height:48px;min-height:48px} @media(max-width:400px){body.driving #driving-panel .drive-map-status{gap:6px;padding:8px}body.driving #driving-panel .drive-live-readings{gap:6px}body.driving #driving-panel .drive-road-status{font-size:10px}} /* Final navigation polish: consistent surfaces, type and spacing. */ body.driving #driving-panel{--nav-ink:#214c3e;--nav-paper:#fafcf8;--nav-border:#c4d3c2;font-family:"Horus Avenir","Avenir Next",sans-serif} body.driving #driving-panel .drive-route-panel{background:var(--nav-paper);border-radius:12px;box-shadow:0 3px 12px #183d3920;min-height:98px} body.driving #driving-panel .drive-route-panel .drive-destination-bar{padding:8px 12px;gap:8px;background:var(--nav-ink);border-radius:12px 12px 0 0} body.driving #driving-panel .drive-route-panel .drive-target{font-size:14px;line-height:20px;font-weight:600} body.driving #driving-panel .drive-route-panel .drive-progress{font-size:12px;line-height:20px;color:#e0ebe3;font-weight:500} body.driving #driving-panel .drive-route-panel .drive-trip-bar{padding:8px 10px;gap:10px} body.driving #driving-panel .drive-route-panel .drive-trip-copy{column-gap:22px;align-content:center} body.driving #driving-panel .drive-time-cell{gap:3px} body.driving #driving-panel .drive-time-cell small{font-size:12px;font-weight:500;line-height:16px;color:#5a6a60} body.driving #driving-panel .drive-route-panel .drive-duration,body.driving #driving-panel .drive-route-panel .drive-eta{font-size:20px;line-height:24px;letter-spacing:0;font-weight:600;color:var(--nav-ink)} body.driving #driving-panel .drive-route-panel #drive-exit{background:#edf2e9;border:1px solid #d2dece;border-radius:8px;color:var(--nav-ink);font-size:14px;font-weight:500;min-height:48px} body.driving #driving-panel .drive-map-status,body.driving #driving-panel>#drive-north,body.driving #driving-panel .drive-map-buttons{background:var(--nav-paper);border-color:var(--nav-border);box-shadow:0 2px 8px #183d391a;border-radius:12px} body.driving #driving-panel .drive-map-status{gap:10px;padding:8px 10px} body.driving #driving-panel .drive-road-status{font-size:12px;color:#71551e;font-weight:500} body.driving #driving-panel .drive-map-status .drive-speed{font-size:18px;font-weight:600;line-height:24px} body.driving #driving-panel .drive-gps{font-size:12px;font-weight:500;color:#52695d} body.driving #driving-panel button:active{filter:brightness(.94)} body.driving #driving-panel button:focus-visible{outline:3px solid #2475e8;outline-offset:2px} @media(max-width:400px){body.driving #driving-panel .drive-route-panel .drive-trip-copy{column-gap:16px}body.driving #driving-panel .drive-route-panel .drive-target{font-size:12px}body.driving #driving-panel .drive-route-panel .drive-progress{font-size:11px}body.driving #driving-panel .drive-map-status{gap:8px}body.driving #driving-panel .drive-road-status{font-size:12px}} /* Secondary road note stays near route information. */ body.driving #driving-panel .drive-route-panel>.drive-road-status{position:absolute;bottom:calc(100% + 6px);left:0;margin:0;padding:3px 7px;background:#f8faf5eF;border-radius:5px;font-size:11px;font-weight:400;color:#647064;white-space:nowrap;max-width:100%} body.driving #driving-panel .drive-route-panel>.drive-road-status[hidden]{display:none} /* Distinguish speed from GPS accuracy without implying safety thresholds. */ body.driving #driving-panel .drive-map-status .drive-speed{color:#174f78;background:#e3eff8;border-radius:6px;padding:3px 7px;line-height:24px} body.driving #driving-panel .drive-map-status .drive-gps{color:#405c49;background:#e7eee3;border-radius:6px;padding:5px 7px;line-height:20px} /* Match trip-time badges to the speed and GPS visual language. */ body.driving #driving-panel .drive-route-panel .drive-duration{color:#174f78;background:#e3eff8;border-radius:6px;padding:3px 6px} body.driving #driving-panel .drive-route-panel .drive-eta{color:#405c49;background:#e7eee3;border-radius:6px;padding:3px 6px} body.driving #driving-panel .drive-route-panel .drive-trip-copy{column-gap:16px} @media(max-width:400px){body.driving #driving-panel .drive-route-panel .drive-trip-copy{column-gap:10px}} body.driving #driving-panel .drive-route-panel .drive-target,body.driving #driving-panel .drive-route-panel .drive-progress{font-size:13px;font-weight:500;line-height:20px} body.driving #driving-panel .drive-route-panel .drive-target{color:#ffffff} body.driving #driving-panel .drive-route-panel .drive-progress{color:#bde3ff} /* Keep turbine identifiers intact on narrow outer screens. */ body.driving #driving-panel .drive-route-panel .drive-target{white-space:nowrap;flex:1 1 auto;min-width:0} body.driving #driving-panel .drive-route-panel .drive-progress{flex:0 0 auto;white-space:nowrap} body.driving #driving-panel .drive-route-panel .drive-destination-bar{gap:8px} /* Keep distance immediately after the destination. */ body.driving #driving-panel .drive-route-panel .drive-destination-bar{justify-content:flex-start;gap:6px} body.driving #driving-panel .drive-route-panel .drive-target{flex:0 0 auto} body.driving #driving-panel .drive-route-panel .drive-destination-bar{justify-content:center;text-align:center} body.driving #driving-panel .drive-route-panel .drive-destination-bar{gap:0} body.driving #driving-panel .drive-route-panel .drive-progress{color:#ffffff} /* Unified primary map toolbar. */ body:not(.driving) .map-actions{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;background:#fafcf8;border:1px solid #c4d3c2;border-radius:12px;box-shadow:0 2px 8px #183d391a} body:not(.driving) .map-actions button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:48px;height:48px;min-height:48px;margin:0;padding:0;background:transparent;color:#214c3e;border:0;border-radius:0;box-shadow:none;font-size:24px} body:not(.driving) .map-actions button+button{border-top:1px solid #d5e0d3} body:not(.driving) .map-actions button svg{width:24px;height:24px;flex-shrink:0} body:not(.driving) .map-actions button:hover{background:#e7eee3} body:not(.driving) .map-actions button:active{background:#dce9d7} body:not(.driving) .map-actions button:focus-visible{outline:3px solid #2475e8;outline-offset:-3px} body.driving #driving-panel .drive-route-panel .drive-destination-bar{gap:4px} /* Match the full trip card to the 98px two-button toolbar. */ body.driving #driving-panel .drive-route-panel{height:98px;min-height:98px;box-sizing:border-box;display:flex;flex-direction:column} body.driving #driving-panel .drive-route-panel .drive-destination-bar{box-sizing:border-box;height:30px;min-height:30px;flex:0 0 30px;padding:5px 10px} body.driving #driving-panel .drive-route-panel .drive-trip-bar{box-sizing:border-box;height:68px;min-height:0;flex:0 0 68px;padding:6px 10px} body.driving #driving-panel .drive-route-panel .drive-trip-copy{row-gap:0} body.driving #driving-panel .drive-time-cell{gap:2px} body.driving #driving-panel .drive-map-buttons{height:98px;bottom:12px} /* Allow extra height only when a GPS or route warning needs to be read. */ body.driving #driving-panel .drive-route-panel:has(.drive-detail:not([hidden])){height:auto} body.driving #driving-panel .drive-route-panel:has(.drive-detail:not([hidden])) .drive-trip-bar{height:auto;flex-basis:auto;min-height:68px} /* Shared optical size for all four map-toolbar glyphs. */ body:not(.driving) .map-actions button{font-size:0!important}body:not(.driving) .map-actions button>svg{display:none}body:not(.driving) .map-actions button:before{content:"";display:block;width:24px;height:24px;background:currentColor;mask-size:contain;mask-position:center;mask-repeat:no-repeat} body:not(.driving) .map-actions #map-search-shortcut:before{mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226.5%22%2F%3E%3Cpath%20d%3D%22m15.5%2015.5%205%205%22%2F%3E%3C%2Fsvg%3E")} body:not(.driving) .map-actions #locate:before{mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223.5%22%2F%3E%3C%2Fsvg%3E")} body:not(.driving) .map-actions #fit:before{mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%204H4v5m11-5h5v5M4%2015v5h5m11-5v5h-5%22%2F%3E%3C%2Fsvg%3E")} body:not(.driving) .map-actions #weather-shortcut:before{mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%2018a4%204%200%201%201%201-7%205%205%200%200%201%2010-1%204%204%200%201%201%201%208z%22%2F%3E%3C%2Fsvg%3E")} /* Turbine selection: one primary action and optional supporting information. */ #selected-card{padding:14px;max-width:420px;border-radius:14px} #selected-card .destination-head{align-items:center;gap:10px} #selected-card .destination-head h1{font-size:28px;line-height:1.2;margin:4px 0} #selected-card .destination-head .eyebrow{font-size:11px;letter-spacing:1px} #selected-card #go-button{min-height:48px;font-size:18px;padding:10px 18px;border-radius:10px} #selected-card #follow{display:none!important} #selected-card #mobile-destination-details{border-top:1px solid #d7e1d3;margin-top:12px;padding-top:0} #selected-card #mobile-destination-details>summary{padding:12px 0;min-height:44px;box-sizing:border-box;font-size:14px;color:#52695d;cursor:pointer} #selected-card #mobile-destination-details[open]{background:#edf3e8;padding:0 10px 10px;border-radius:8px} #selected-card #destination-meta,#selected-card #target-bearing{font-size:13px;line-height:1.5;margin:8px 0} #selected-card .satellite-link,#selected-card #clear-route{font-size:14px;min-height:44px;padding:10px 12px;border-radius:8px} #selected-card #route-summary{font-size:14px;margin-top:8px;line-height:1.4} #selected-card #route-summary strong{font-size:20px} #selected-card #route-summary:empty{display:none} #selected-card .destination-head h1{font-size:22px;line-height:1.3} #selected-card #target-bearing{display:none} #selected-card #mobile-destination-details[open]>summary{padding-bottom:4px} #selected-card #mobile-destination-details #destination-meta{margin-top:0;padding-top:0} /* Place directions action */ #places-dialog .service-results article>a.service-map-link{width:auto;min-width:112px;max-width:none;flex-basis:auto;padding:12px 16px;white-space:nowrap} /* Separate columns prevent contact actions from overlapping at narrow widths. */ #places-dialog .service-results article{grid-template-columns:minmax(0,1fr) 48px;column-gap:12px} #places-dialog .service-results article>strong,#places-dialog .service-results article>small{grid-column:1/-1} #places-dialog .service-results article>.service-phones{grid-column:1;grid-row:3;padding-right:0;min-width:0} #places-dialog .service-results article>a.service-map-link{grid-column:2;grid-row:3} #places-dialog .service-results .service-phone-row{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:8px} #places-dialog .service-results .service-phone-row>strong{white-space:normal;overflow-wrap:anywhere} #places-dialog .service-results .service-phone-row>button,#places-dialog .service-results article>a.service-map-link{width:48px;min-width:48px;max-width:48px;height:48px;min-height:48px;padding:0;flex-basis:48px;display:flex;align-items:center;justify-content:center} #places-dialog .service-map-link svg,#places-dialog .service-phone-row button svg{display:block;width:24px;height:24px} #place-list .service-map-link{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px} /* Shared icon interaction: clear hit area and visible keyboard/press feedback. */ button.icon-btn,a.service-map-link,.service-phone-row>button{touch-action:manipulation} button.icon-btn{min-width:48px;min-height:48px} button.icon-btn:focus-visible,a.service-map-link:focus-visible,.service-phone-row>button:focus-visible,.map-controls button:focus-visible{outline:3px solid #2475e8;outline-offset:3px} button.icon-btn:active,a.service-map-link:active,.service-phone-row>button:active{filter:brightness(.9)} #selected-card .destination-head .icon-btn{width:48px;min-width:48px;height:48px;min-height:48px;max-height:48px;flex-basis:48px} #destination-direct-distance{display:block;font-size:14px;line-height:1.4;color:#526157;margin-top:3px} #destination-direct-distance[hidden]{display:none} /* Compact place rows without shrinking touch targets. */ #places-dialog .service-results article{padding:10px 0;row-gap:3px;align-content:start} #places-dialog .service-results article>strong{margin:0;line-height:1.3} #places-dialog .service-results article>small{margin:0;line-height:1.3} #places-dialog .service-results article>.service-phones{margin:0;gap:4px} #places-dialog .service-results .service-phone-row{margin:0;min-height:48px} #places-dialog .service-results .service-phone-row>strong{margin:0;line-height:1.3} /* Explicit Google Maps shortcut beside place navigation. */ #places-dialog .service-results article{grid-template-columns:minmax(0,1fr) 48px 48px;column-gap:8px} #places-dialog .service-results article>.google-maps-link{grid-column:3;grid-row:3} #places-dialog .google-maps-link{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:48px;min-width:48px;height:48px;margin:0;padding:0;border:1px solid #c8d6c3;border-radius:8px;background:#fff;color:#4285f4;font-family:Arial,sans-serif;font-size:25px;font-weight:700;text-decoration:none;touch-action:manipulation} #places-dialog .google-maps-link:focus-visible{outline:3px solid #2475e8;outline-offset:3px} #places-dialog .google-maps-link:active{background:#e8f0fe} .place-navigation-actions{display:inline-flex;gap:8px;vertical-align:middle} @media(max-width:380px){#places-dialog .service-results article>.service-phones{grid-column:1/-1;grid-row:3}#places-dialog .service-results article>a.service-map-link,#places-dialog .service-results article>.google-maps-link{grid-row:4}} /* Consistent place action surfaces and icon colours. */ #places-dialog .google-maps-link, #places-dialog .service-results article>a.service-map-link, #places-dialog .service-results .service-phone-row>button, #place-list .service-map-link{background:#183d39;color:#fff;border:0;border-radius:8px} #places-dialog .google-maps-link{font-family:inherit;font-size:24px;font-weight:600;line-height:1} #places-dialog .google-maps-link:active, #places-dialog .service-results article>a.service-map-link:active, #places-dialog .service-results .service-phone-row>button:active{background:#245448;filter:none} /* Keep all three contact actions in one line on narrow phones. */ @media(max-width:500px){ #places-dialog .service-results article>.service-phones,#places-dialog .service-results .service-phone-row{display:contents} #places-dialog .service-results .service-phone-row>strong{grid-column:1/-1;grid-row:3;margin:3px 0 6px} #places-dialog .service-results .service-phone-row>button{grid-column:1;grid-row:4;justify-self:end} #places-dialog .service-results article>a.service-map-link{grid-column:2;grid-row:4} #places-dialog .service-results article>.google-maps-link{grid-column:3;grid-row:4} } #exit-navigation-dialog{box-sizing:border-box;width:calc(100% - 32px);max-width:380px;margin:auto;padding:24px;border:1px solid #c8d6c3;border-radius:18px;background:#f8faf5;color:#183d39} #exit-navigation-dialog::backdrop{background:#183d3966} #exit-navigation-dialog h2{font-size:22px;line-height:1.3;margin:0 0 24px} .exit-navigation-actions{display:flex;flex-direction:column;gap:12px} #exit-navigation-dialog button{min-height:48px;padding:12px;font:inherit;font-size:17px;border-radius:10px;border:1px solid #a9bcad;background:#edf1eb;color:#183d39} #exit-navigation-dialog [data-keep]{background:#183d39;color:#fff} #exit-navigation-dialog button:focus-visible{outline:3px solid #2475e8;outline-offset:3px} /* All authorised farms remain visible, including during guidance. */ .wtg-marker{background:#f6f7f2;color:#526157;border-color:#8c9c91} .wtg-marker.is-active-farm{background:#e1eff9;color:#155780;border-color:#3977a0} .wtg-marker.is-active-farm:before{background:#2475a0} .wtg-marker.wtg-dot.is-active-farm{background:#2475a0} .wtg-marker.is-selected{background:#173b36;color:#fff;border:2px solid #e3bb54;font-weight:700;z-index:5} .wtg-marker.is-selected:before{background:#e3bb54} body.driving .wtg-marker{display:block} .weather-update-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 12px} .weather-update-row>[role=status]{margin:0;flex:1;min-width:0} .weather-overview .weather-update-row>.weather-refresh{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:1px solid #c8d6c3;border-radius:10px;background:#edf1eb;color:#183d39;text-decoration:none} .weather-update-row .weather-refresh svg{width:24px;height:24px} #weather-panel .weather-update-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:10px;margin:0 0 8px;padding:0} #weather-panel .weather-heading-text .weather-location{margin:0 0 3px;line-height:1.3} #weather-panel .weather-heading-text [role=status]{margin:0;font-size:12px;line-height:1.4} #weather-panel .weather-heading-text [role=status]:empty{display:none} #weather-panel .weather-update-row>.weather-refresh{width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;padding:0;margin:0;align-self:center} #weather-panel .weather-overview .weather-now{margin-top:0;padding-top:8px} /* Weather location header matches the navigation card. */ #weather-panel .weather-update-row{background:#234f40;color:#fff;border-radius:10px;padding:12px;margin:0 0 10px} #weather-panel .weather-heading-text .weather-location{color:#fff} #weather-panel .weather-heading-text [role=status]{color:#d8e7df} #weather-panel .weather-update-row>.weather-refresh{background:#ffffff14;color:#fff;border:1px solid #ffffff66} /* Reduce the header mark by 35% while preserving title and menu alignment. */ body>header .horus-logo{transform:scale(.65)} /* Halve the visible spacing around the reduced logo in the titled header. */ @media(min-width:601px){ body>header{padding-left:14px} body>header .brand{gap:9px} body>header .horus-logo{margin-left:-9.625px;margin-right:-9.625px} } @media(min-width:601px) and (max-width:1024px){ body>header{padding-left:6px} body>header .brand{gap:4px} }