/* Responsive navigation and application settings. */
.weather-mobile-nav { display:none; }
.weather-mobile-nav[hidden] { display:none !important; }
/* Settings uses compact rows; less frequent preferences expand in place. */
.weather-sheet-panel:focus { outline:none; }
.weather-sheet[data-sheet-kind="units"] .weather-sheet-panel {
  --settings-fill:rgba(255,255,255,.045);
  --settings-line:rgba(210,226,242,.12);
  --settings-muted:#aebed1;
  background:#101c2b !important;
  will-change:auto;
}
.weather-sheet[data-sheet-kind="units"].open:not(.is-leaving) .weather-sheet-panel { transform:none; }
.weather-sheet.wx-sheet-light[data-sheet-kind="units"] .weather-sheet-panel {
  --settings-fill:rgba(255,255,255,.8);
  --settings-line:rgba(22,52,79,.12);
  --settings-muted:#52677c;
  background:#edf2f7 !important;
}
.weather-sheet[data-sheet-kind="units"] .wx-sheet-surface { padding-top:8px; }
.weather-sheet[data-sheet-kind="units"] .wx-sheet-dragzone { padding-bottom:14px; }
.weather-sheet[data-sheet-kind="units"] .wx-sheet-head { min-height:34px; }
.weather-sheet[data-sheet-kind="units"] .weather-sheet-close { background:var(--settings-fill); color:inherit; }
.weather-settings-group, .weather-sheet[data-sheet-kind="units"] .weather-push-summary, .weather-settings-updates {
  margin:0 0 14px; border:1px solid var(--settings-line); border-radius:18px; background:var(--settings-fill); overflow:hidden;
}
.weather-settings-group[hidden] { display:none; }
.weather-settings-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); align-items:center; gap:12px; min-height:60px; margin:0; padding:8px 16px; box-sizing:border-box; font:500 14px/1.4 var(--ff-body); }
.weather-settings-row + .weather-settings-row { border-top:1px solid var(--settings-line); }
.weather-settings-row select {
  appearance:none; -webkit-appearance:none; width:100%; min-width:0; min-height:44px; border:0; border-radius:10px;
  background:transparent; color:inherit; padding:8px 22px 8px 6px; font:inherit; font-size:16px; text-align:end; text-overflow:ellipsis; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23869bb0' stroke-width='1.6'%3E%3Cpath d='m5 6 3-3 3 3M5 10l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:14px; background-position:right center; color-scheme:dark;
}
.weather-sheet.wx-sheet-light .weather-settings-row select { color-scheme:light; }
[dir="rtl"] .weather-settings-row select { padding:8px 6px 8px 22px; background-position:left center; }
.weather-settings-row select:focus-visible, .weather-settings-group summary:focus-visible { outline:2px solid #80caff; outline-offset:-4px; }
.weather-settings-group summary { position:relative; display:flex; flex-direction:column; justify-content:center; gap:4px; min-height:64px; padding:12px 44px 12px 16px; box-sizing:border-box; list-style:none; cursor:pointer; font:600 15px/1.4 var(--ff-body); }
.weather-settings-group summary::-webkit-details-marker { display:none; }
.weather-settings-group summary::after { content:""; position:absolute; inset-inline-end:20px; top:calc(50% - 4px); width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); opacity:.65; }
.weather-settings-group[open] summary::after { transform:rotate(225deg); top:calc(50% - 1px); }
[dir="rtl"] .weather-settings-group summary { padding-inline:16px 44px; }
.weather-settings-summary { font-size:12px; font-weight:400; color:var(--settings-muted); }
.weather-settings-unit-options { padding:0 14px 6px; border-top:1px solid var(--settings-line); }
.weather-settings-unit { padding-block:14px; }
.weather-settings-unit + .weather-settings-unit { border-top:1px solid var(--settings-line); }
.weather-sheet-panel .weather-settings-unit .weather-mod-label { margin:0 0 8px; font:500 13px/1.4 var(--ff-body); letter-spacing:0; text-transform:none; color:inherit; }
.weather-sheet-panel .weather-settings-unit .weather-units-row { display:flex; width:100%; margin:0 !important; min-height:50px; overflow:visible; }
.weather-sheet-panel .weather-settings-unit .weather-units-row button { flex:1; min-width:0; min-height:44px; padding:8px 4px; font:600 13px/1.2 var(--ff-body); }
.weather-sheet[data-sheet-kind="units"] .weather-place-order { margin:0; padding:0 14px 10px; border-top:1px solid var(--settings-line); }
.weather-sheet[data-sheet-kind="units"] .weather-place-order-row { padding-block:8px; }
.weather-sheet[data-sheet-kind="units"] .weather-push-summary { min-height:64px; padding:14px 16px; gap:12px; font-size:15px; }
.weather-sheet[data-sheet-kind="units"] .weather-push-summary-status { color:var(--settings-muted); opacity:1; overflow-wrap:anywhere; }
.weather-settings-updates { padding:16px; }
.weather-settings-updates h4 { margin:0 0 6px; font:600 14px/1.4 var(--ff-body); }
.weather-sheet-panel .weather-settings-updates p { margin:0 0 10px; color:var(--settings-muted); font-size:12px; }
.weather-settings-updates p:empty { display:none; }
.weather-settings-updates button { min-height:44px; padding:8px 12px; border:1px solid var(--settings-line); border-radius:10px; background:rgba(127,153,175,.12); color:inherit; font:600 13px/1.4 var(--ff-body); cursor:pointer; }
.weather-settings-updates button:disabled { opacity:.6; cursor:default; }
.weather-tab-icon { display:none; }
.weather-map-hint { position:absolute; z-index:3; left:12px; bottom:16px; display:flex; align-items:center; gap:8px; max-width:min(340px,calc(100% - 94px)); padding:8px 8px 8px 12px; border:1px solid rgba(188,214,239,.3); border-radius:14px; background:rgba(12,27,46,.94); color:#eef5fc; }
.weather-map-hint[hidden] { display:none; }
.weather-map-hint p { margin:0; font-size:12px; line-height:1.5; }
.weather-map-hint button { flex:none; width:44px; height:44px; border:0; border-radius:10px; background:transparent; color:inherit; font:24px/1 var(--ff-body); cursor:pointer; }
.weather-map-hint button:focus-visible { outline:2px solid currentColor; outline-offset:-2px; }

/* Shared controls retain the platform picker with a consistent closed surface. */
body.duskline .weather-product-controls { gap:12px; margin-bottom:14px; }
body.duskline .weather-product-controls label { flex:1 1 160px; min-width:0; display:grid; gap:5px; font-size:11px; color:var(--duskline-muted); }
body.duskline .weather-product-controls select {
  appearance:none; -webkit-appearance:none; width:100%; min-width:0; min-height:44px; box-sizing:border-box;
  padding:10px 34px 10px 12px; border:1px solid rgba(171,196,220,.2); border-radius:12px;
  background-color:rgba(12,27,46,.48); color:#eaf3ff; font:500 16px/1.4 var(--ff-body); color-scheme:dark;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23869bb0' stroke-width='1.6'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:16px; background-position:right 10px center;
}
body.duskline .weather-product-controls select:focus-visible { outline:2px solid #80caff; outline-offset:2px; }
body.duskline.weather-sky-light .weather-product-controls label { color:#52677c; }
body.duskline.weather-sky-light .weather-product-controls select { background-color:rgba(255,255,255,.64); color:#16344f; border-color:rgba(22,52,79,.15); color-scheme:light; }
[dir="rtl"] body.duskline .weather-product-controls select { padding-inline:12px 34px; background-position:left 10px center; }
@media (min-width:760px) {
  body.duskline .weather-product-controls label { flex:0 1 220px; }
}

@media (max-width:640px) and (min-height:500px) {
  body.duskline[data-mobile-shell] { padding-top:calc(76px + env(safe-area-inset-top)); padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
  body.duskline[data-mobile-shell] .duskline-header { min-height:60px; height:calc(60px + env(safe-area-inset-top)); padding:calc(6px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left)); gap:8px; box-sizing:border-box; }
  body.duskline[data-mobile-shell] .duskline-brand { font-size:17px; letter-spacing:-.02em; gap:8px; }
  body.duskline[data-mobile-shell] .duskline-logo { width:28px; height:28px; }
  body.duskline[data-mobile-shell] #dusklineLanguage { display:none; }
  body.duskline[data-mobile-shell] .duskline-header .nav-actions { display:flex; align-items:center; gap:4px; }
  body.duskline[data-mobile-shell] .duskline-header .weather-btn-icon {
    border:0 !important; background:transparent !important; box-shadow:none !important; color:inherit; backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  body.duskline[data-mobile-shell] .duskline-header .weather-btn-icon:active { background:rgba(127,153,175,.16) !important; }
  body.duskline[data-mobile-shell] .duskline-header { background:rgba(10,23,39,.88); border-bottom:1px solid rgba(171,196,220,.1); box-shadow:none; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
  body.duskline.weather-sky-light[data-mobile-shell] .duskline-header { background:rgba(240,246,252,.86); border-bottom-color:rgba(22,52,79,.08); }
  body.duskline[data-mobile-shell] .weather-product-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  body.duskline[data-mobile-shell] .weather-product-controls button { grid-column:1 / -1; }
  body.duskline[data-mobile-shell] .weather-start { padding:18px; border-radius:20px; box-shadow:none; border-color:rgba(171,196,220,.2); }
  body.duskline[data-mobile-shell] .weather-start-copy p { font-size:13px; }
  body.duskline[data-mobile-shell] .weather-start-copy h3 { font-size:17px; line-height:1.3; }
  body.duskline[data-mobile-shell] .weather-start-actions .weather-btn { min-height:44px !important; font-size:12px !important; box-shadow:none; }
  body.duskline[data-mobile-shell] .weather-section-label { font-size:11px; letter-spacing:.06em; margin:20px 2px 10px; }
  body.duskline[data-mobile-shell] .weather-page-sky .wx-page-sun { opacity:.28; }
  body.duskline[data-mobile-shell] .weather-greeting-wrap { flex-direction:row; align-items:center; width:100%; gap:12px; margin:0 0 10px; min-height:44px; }
  body.duskline[data-mobile-shell] .weather-greeting-title { flex:1; font-size:19px; line-height:1.35; min-width:0; }
  body.duskline[data-mobile-shell] .weather-greeting-place { flex:0 1 112px; min-height:44px; margin:0; text-align:end; line-height:1.4; }
  body.duskline[data-mobile-shell] .weather-toolbar-actions { display:none !important; }
  body.duskline[data-mobile-shell] #tools.weather-root.tools-page { padding-top:0; }
  body.duskline[data-mobile-shell] .weather-status-row { margin-bottom:12px; }
  body.duskline[data-mobile-shell] .weather-mobile-nav {
    position:fixed; z-index:250; inset:auto max(16px,env(safe-area-inset-right)) max(10px,calc(env(safe-area-inset-bottom) - 12px)) max(16px,env(safe-area-inset-left));
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; max-width:560px; margin-inline:auto;
    padding:5px; border:1px solid rgba(188,214,239,.18); border-radius:26px;
    color:#eef5fc; background:rgba(12,27,46,.9); box-shadow:0 8px 30px rgba(0,0,0,.22);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  }
  body.duskline[data-mobile-shell] .weather-mobile-nav .weather-mode-switch { display:contents; }
  body.duskline[data-mobile-shell] .weather-mobile-nav button,
  body.duskline[data-mobile-shell] #weatherMobileNav #weatherMapOpen {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:auto !important; min-width:0 !important; max-width:none !important;
    min-height:54px !important; height:auto; margin:0; padding:8px !important; border:0 !important; border-radius:20px !important;
    background:transparent !important; color:inherit !important; box-shadow:none !important; font:600 11px/1.3 var(--ff-body); font-size:11px !important; backdrop-filter:none; -webkit-backdrop-filter:none; white-space:normal; overflow-wrap:anywhere;
  }
  body.duskline[data-mobile-shell] #weatherMobileNav #weatherMapOpen span { display:inline; font:inherit !important; }
  body.duskline[data-mobile-shell] #weatherMobileNav #weatherMapOpen svg { display:block; width:21px; height:21px; }
  body.duskline[data-mobile-shell] .weather-tab-icon { display:block; width:21px; height:21px; }
  body.duskline[data-mobile-shell] #weatherMobileNav button[aria-pressed="true"] { background:rgba(145,205,255,.2) !important; }
  body.duskline[data-mobile-shell] #weatherMobileNav button:focus-visible { outline:2px solid currentColor; outline-offset:-3px; }
  body.duskline.weather-sky-light[data-mobile-shell] #weatherMobileNav { background:rgba(246,250,255,.96); color:#16344f; border-color:rgba(22,52,79,.18); }
  body.duskline.weather-sky-light[data-mobile-shell] #weatherMobileNav button[aria-pressed="true"] { background:#dceaf7 !important; }
  html[data-weather-modal] #weatherMobileNav,body[data-soft-keyboard] #weatherMobileNav { visibility:hidden; pointer-events:none; }
  body.duskline[data-mobile-shell] .weather-update-toast { bottom:calc(90px + env(safe-area-inset-bottom)); }
}

@media (max-width:359px) and (min-height:500px) {
  body.duskline[data-mobile-shell] .weather-start { grid-template-columns:1fr; padding:16px; }
  body.duskline[data-mobile-shell] .weather-start-mark, body.duskline[data-mobile-shell] .weather-start-copy p { display:none; }
  body.duskline[data-mobile-shell] .weather-start-copy h3 { margin:0; font-size:16px; }
}

@media (max-width:640px) and (min-height:500px) {
  body[data-mobile-shell] #weatherMap[data-presentation="page"] { top:calc(60px + env(safe-area-inset-top)); z-index:200; transition:none; }
  body[data-mobile-shell] #weatherMap[data-presentation="page"] .weather-map-panel { height:100%; grid-template-rows:auto minmax(140px,1fr) auto; padding-bottom:calc(90px + env(safe-area-inset-bottom)); box-sizing:border-box; }
  body[data-mobile-shell] #weatherMap[data-presentation="page"] .weather-map-header { display:none; }
  body[data-mobile-shell] #weatherMap[data-presentation="page"] .weather-map-toolbar { display:flex; min-height:52px; gap:8px; padding:4px 12px; box-sizing:border-box; }
  body[data-mobile-shell] #weatherMap[data-presentation="page"] .weather-map-layers { flex:1; min-width:0; }
  body[data-mobile-shell] #weatherMap[data-presentation="page"] .weather-map-place-picker { flex:0 0 44px; width:44px; margin:0; }
  body[data-mobile-shell] #weatherMap[data-presentation="page"] .weather-map-place-picker > summary { width:44px; height:44px; box-sizing:border-box; padding:0; justify-content:center; }
  body[data-mobile-shell] #weatherMap[data-presentation="page"] .weather-map-place-picker > summary span,
  body[data-mobile-shell] #weatherMap[data-presentation="page"] .weather-map-place-picker > summary::after { display:none; }
  body[data-mobile-shell] #weatherMap[data-presentation="page"] .weather-map-places-icon { display:block; width:18px; height:18px; }
  body[data-mobile-shell] #weatherMap[data-presentation="page"] .weather-map-places { inset-inline-start:auto; inset-inline-end:0; width:min(340px,calc(100vw - 24px)); }
  html.weather-map-open body.duskline[data-mobile-shell] #navbar { visibility:visible; z-index:250; color:#eef5fc; background:rgba(10,23,39,.96) !important; }
  html[data-weather-modal="map"] body[data-mobile-shell] #weatherMobileNav { visibility:visible; pointer-events:auto; }
  html.weather-map-open body.duskline[data-mobile-shell] #weatherMobileNav { background:rgba(12,27,46,.96); color:#eef5fc; border-color:rgba(188,214,239,.18); }
  html.weather-map-open body.duskline[data-mobile-shell] #navbar .weather-btn-icon { color:#eef5fc !important; }
  html.weather-map-open body.duskline[data-mobile-shell] .duskline-brand { color:#eef5fc; }
  html.weather-map-open body.duskline[data-mobile-shell] #weatherMobileNav #weatherMapOpen[aria-pressed="true"],
  html.weather-map-open body.duskline[data-mobile-shell] #weatherMobileNav button[aria-pressed="true"] { background:rgba(145,205,255,.2) !important; }
  html.weather-map-open body[data-mobile-shell] #weatherSheet #weatherToast { visibility:visible !important; }
}