/* Map Style owns the switch; the map timeline appears only while enabled. */
.sun-shade-map-option { white-space: normal; }
.map-dock-popover-item.sun-shade-map-option[aria-checked="true"] { background: #eef5ef; color: #245b41; }
.sun-shade { position: fixed; z-index: 3; right: 88px; bottom: 24px; width: min(550px, calc(100vw - var(--left-rail-width, 72px) - 108px)); font: 13px/1.4 system-ui, sans-serif; color: #163b2e; }
.sun-shade[hidden], .sun-shade-dev[hidden] { display: none !important; }
.sun-shade-body { box-sizing: border-box; max-height: calc(100dvh - var(--premium-banner-offset, 0px) - 100px); overflow-y: auto; padding: 12px; background: #fff; border: 1px solid #d2ddd5; border-radius: 12px; box-shadow: 0 5px 16px #163b2e20; }
.sun-shade-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; background: #fff; box-shadow: 0 -12px 0 #fff; }
.sun-shade-header strong { margin-right: auto; }
.sun-shade button { padding: 6px 9px; min-height: 34px; border: 1px solid #bdcec1; border-radius: 8px; background: #eef5ef; color: #163b2e; font: inherit; cursor: pointer; }
.sun-shade-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sun-shade-fields > div { min-width: 0; }
.sun-shade label { display: block; margin: 8px 0 2px; font-size: 11px; font-weight: 600; }
.sun-shade input, .sun-shade select { width: 100%; box-sizing: border-box; min-width: 0; min-height: 32px; font: inherit; }
.sun-shade input[type="range"] { accent-color: #245b41; min-height: 26px; }
.sun-shade label.sun-shade-buildings-setting { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-weight: 400; }
.sun-shade input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; accent-color: #245b41; }
.sun-shade output { float: right; font-size: 13px; }
.sun-shade p { margin: 4px 0 0; font-size: 11px; }
.sun-shade .sun-shade-note { font-size: 10px; color: #52685a; }
.sun-shade :focus-visible, .sun-shade-map-option:focus-visible { outline: 3px solid #c79226; outline-offset: 2px; }
.sun-shade-dev { position: fixed; top: 100px; right: 88px; z-index: 3; width: 280px; background: #fff; border-radius: 8px; padding: 8px; font: 11px/1.4 system-ui, sans-serif; }
.sun-shade-dev summary { cursor: pointer; }
.sun-shade-diagnostics { font-size: 10px; max-height: 180px; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 768px), (max-height: 520px) and (pointer: coarse) {
  .sun-shade { z-index: 30; left: max(12px, env(safe-area-inset-left, 0px)); right: calc(72px + env(safe-area-inset-right, 0px)); bottom: calc(var(--mobile-v2-tabbar-height, 72px) + 16px); width: auto; white-space: normal; }
  .sun-shade-body { max-height: min(270px, calc(100dvh - var(--mobile-v2-tabbar-height, 72px) - var(--mobile-v2-topbar-height, 56px) - 40px)); }
  .sun-shade-fields { gap: 8px; }
  .sun-shade-header { font-size: 12px; gap: 5px; flex-wrap: wrap; }
  .sun-shade-header strong { flex: 1 0 100%; }
  .sun-shade button, .sun-shade input:not([type="checkbox"]), .sun-shade select { min-height: 44px; }
  .sun-shade-header button { min-width: 44px; padding: 5px 6px; }
  .sun-shade label.sun-shade-buildings-setting { min-height: 44px; }
  html.landai-mobile-shell-v2 body.mobile-v2-surface-active:not(.mobile-v2-background-interactive) .sun-shade,
  html.landai-mobile-shell-v2 body.mobile-v2-keyboard-open .sun-shade { visibility: hidden; pointer-events: none; }
  .sun-shade-dev { top: 90px; right: 10px; max-width: calc(100vw - 36px); }
}