/* Compact-device geometry. Desktop keeps the original 1440 × 900 canvas;
   tablet and phone use their real viewport so controls remain touch-sized. */
body.responsive-compact #desktop {
  width:100vw !important; height:100dvh !important; left:0 !important; top:0 !important;
  transform:none !important; background-position:center; background-size:cover;
}

body.responsive-compact .window:not(.maximized) {
  left:var(--responsive-x) !important; top:var(--responsive-y) !important;
  width:var(--responsive-width) !important; height:var(--responsive-height) !important;
  min-width:0 !important; min-height:0 !important;
  max-width:none !important; max-height:none !important;
}

body.responsive-compact .window.maximized {
  left:0 !important; top:0 !important; width:100vw !important; height:100dvh !important;
  min-width:0 !important; min-height:0 !important; max-width:none !important; max-height:none !important;
}

body.responsive-compact .window {
  max-width:100vw !important; max-height:100dvh !important;
}
body.responsive-compact .window > :not(.resize-handle) { min-width:0; min-height:0; }

body.responsive-tablet .dock {
  --dock-icon-size:50px; --dock-slot-w:50px; --dock-slot-h:58px; --dock-h:66px;
  --dock-gap:6px; bottom:10px;
}

body.responsive-tablet #settings-window.system-window,
body.responsive-tablet #settings-window.system-window.maximized {
  width:var(--responsive-width) !important; height:var(--responsive-height) !important;
  min-width:0 !important; min-height:0 !important; max-width:none !important; max-height:none !important;
}
body.responsive-tablet #settings-window :is(.personal-settings-sidebar,.personal-settings-main) {
  overflow:auto !important;
}
body.responsive-tablet #settings-window .personal-settings-main {
  padding-bottom:18px !important;
}

body.responsive-phone .window:not(.maximized) {
  left:var(--responsive-x) !important; top:var(--responsive-y) !important;
  width:var(--responsive-width) !important; height:var(--responsive-height) !important;
}

body.responsive-phone .about-window:not(.maximized) {
  left:12px !important; top:calc(var(--menubar-h) + 12px) !important;
  width:calc(100vw - 24px) !important;
  height:min(500px,calc(100dvh - var(--menubar-h) - 24px)) !important;
  border-radius:12px !important;
}

body.responsive-phone #settings-window.system-window,
body.responsive-phone #settings-window.system-window.maximized {
  width:var(--responsive-width) !important; height:var(--responsive-height) !important;
  min-width:0 !important; min-height:0 !important; max-width:none !important; max-height:none !important;
}
body.responsive-phone #settings-window.system-window > .window-content {
  grid-template-columns:126px minmax(0,1fr) !important;
}
body.responsive-phone #settings-window .personal-settings-sidebar {
  display:flex !important; flex-direction:column; padding:52px 6px 10px !important; overflow:auto !important;
}
body.responsive-phone #settings-window .settings-account-mini {
  gap:6px; margin:0 2px 9px;
}
body.responsive-phone #settings-window .settings-account-mini .settings-photo {
  width:32px; height:32px;
}
body.responsive-phone #settings-window .settings-account-mini strong {
  max-width:74px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:10px; line-height:12px;
}
body.responsive-phone #settings-window .settings-account-mini span { font-size:8px; line-height:10px; }
body.responsive-phone #settings-window .settings-app-groups {
  gap:5px;
  justify-content:flex-start;
}
body.responsive-phone #settings-window .settings-app-group { gap:1px; }
body.responsive-phone #settings-window .settings-app-group + .settings-app-group { margin-top:8px; }
body.responsive-phone #settings-window .settings-app-row {
  height:20px; gap:5px; padding:0 3px; font-size:9px;
}
body.responsive-phone #settings-window .settings-app-icon {
  width:15px; height:15px; flex-basis:15px; border-radius:4px;
}
body.responsive-phone #settings-window .settings-app-icon img { width:10px; height:10px; }
body.responsive-phone #settings-window .personal-settings-main {
  padding:53px 10px 12px !important; overflow:auto !important; row-gap:8px;
  overscroll-behavior:contain;
}
body.responsive-phone #settings-window .settings-profile {
  margin-bottom:2px;
  transform:translateY(-4px);
}
body.responsive-phone #settings-window .settings-profile .settings-photo { width:48px; height:48px; }
body.responsive-phone #settings-window .settings-profile h2 { margin-top:5px; font-size:13px; }
body.responsive-phone #settings-window .settings-profile p { font-size:8px; }
body.responsive-phone #settings-window .settings-about-card {
  padding:8px 9px; font-size:9px; line-height:1.32;
}
body.responsive-phone #settings-window .settings-about-card p { margin-bottom:6px; }
body.responsive-phone #settings-window .settings-info-row {
  min-height:25px; grid-template-columns:minmax(78px,38%) minmax(0,1fr); gap:6px; padding:0 7px;
  font-size:9px;
}
body.responsive-phone #settings-window .settings-language-card { margin-top:0 !important; }
body.responsive-phone #settings-window .settings-language-row {
  grid-template-columns:58px minmax(0,1fr); min-height:27px; padding:0 7px; gap:6px;
}
body.responsive-phone #settings-window .settings-language-name { font-size:9px; }

body.responsive-phone .safari-address {
  width:min(58%,320px); min-width:0; left:50%; right:auto; transform:translateX(-50%);
  padding-left:28px; padding-right:58px;
}
body.responsive-phone .safari-profile-proxy { display:none !important; }

body.responsive-phone .maps-route-panel {
  left:auto; right:8px; top:8px;
  width:min(230px,calc(100% - 16px));
  max-height:calc(100% - 52px);
  padding:7px;
  border-radius:10px;
  overflow:auto;
  transition:none;
}

body.responsive-phone #about-window .about-button {
  width:148px !important; min-width:148px !important;
  white-space:nowrap; font-size:12px !important;
}
body.responsive-phone .maps-route-panel:hover {
  border-color:rgba(255,255,255,.16);
  background:rgba(65,71,72,.86);
}
body.responsive-phone .maps-live-map:hover .maplibregl-canvas { filter:none; }
body.responsive-phone .maps-route-panel .maps-panel-toolbar {
  height:28px;
  grid-template-columns:18px 1fr;
  gap:5px;
  margin-bottom:6px;
}
body.responsive-phone .maps-route-panel .maps-panel-close {
  width:15px;
  height:20px;
}
body.responsive-phone .maps-route-panel .maps-mode-row {
  height:28px;
  border-radius:7px;
}
body.responsive-phone .maps-route-panel .maps-mode-button {
  border-radius:7px;
}
body.responsive-phone .maps-route-panel .maps-mode-button + .maps-mode-button::before {
  top:7px;
  bottom:7px;
}
body.responsive-phone .maps-route-panel .maps-mode-button img {
  width:16px;
  height:16px;
}
body.responsive-phone .maps-route-panel .maps-location-row {
  min-height:31px;
  grid-template-columns:13px minmax(0,1fr);
  gap:6px;
  padding:0 7px;
  font-size:10px;
}
body.responsive-phone .maps-route-panel .maps-location-row input {
  height:29px;
  min-width:0;
  font-size:10px;
}
body.responsive-phone .maps-route-panel .maps-location-dot {
  width:8px;
  height:8px;
  box-shadow:0 0 0 2px rgba(255,255,255,.08);
}
body.responsive-phone .maps-route-panel .maps-location-dot.start {
  box-shadow:0 0 0 2px rgba(10,132,255,.16);
}
body.responsive-phone .maps-route-panel .maps-guide-button {
  height:29px;
  margin-top:6px;
  border-radius:7px;
  font-size:10px;
}
body.responsive-phone .maps-route-panel .maps-options {
  margin-top:8px;
}
body.responsive-phone .maps-route-panel .maps-options h3 {
  margin-bottom:5px;
  font-size:10px;
}
body.responsive-phone .maps-route-panel .maps-option {
  min-height:38px;
  grid-template-columns:1fr 16px;
  padding:4px 7px;
}
body.responsive-phone .maps-route-panel .maps-option strong {
  font-size:11px;
  line-height:13px;
}
body.responsive-phone .maps-route-panel .maps-option span {
  font-size:9px;
  line-height:11px;
}
body.responsive-phone .maps-route-panel .maps-option-chevron {
  width:13px;
  height:20px;
}
body.responsive-phone .maps-route-panel .maps-option-chevron::before {
  right:2px;
  width:6px;
  height:6px;
  border-width:1.5px;
}
body.responsive-phone .maps-route-panel .maps-route-status {
  min-height:13px;
  margin:5px 2px 0;
  font-size:8.5px;
  line-height:1.25;
}
body.responsive-phone .maps-route-panel .maps-location-suggestions {
  font-size:10px;
}
body.responsive-phone .maps-info-panel {
  left:8px;
  right:8px;
  width:auto;
  padding:9px 10px;
  font-size:10px;
}
body.responsive-phone .maps-zoom-control {
  right:8px;
  bottom:8px;
  height:28px;
}
body.responsive-phone .maps-zoom-control button {
  width:28px;
  height:28px;
  font-size:14px;
}

body.responsive-phone .finder-list-header,
body.responsive-phone .finder-list-row {
  grid-template-columns:minmax(0,1fr) 72px !important;
}
body.responsive-phone :is(.finder-list-header,.finder-list-row) > :nth-child(n+3) { display:none; }

body.responsive-phone .menubar { padding-left:7px !important; padding-right:7px !important; }
body.responsive-phone .menubar-right { gap:7px !important; }
body.responsive-phone #menubar-clock {
  display:none !important;
}
body.responsive-phone .camera-indicator { width:34px !important; min-width:34px !important; }

body.responsive-phone #spotlight.spotlight {
  left:50%; top:50% !important; width:calc(100vw - 24px) !important;
  max-width:420px !important; transform:translate(-50%,-50%);
}
body.responsive-phone #spotlight .spotlight-search {
  height:48px !important; padding:0 13px !important;
}
body.responsive-phone #spotlight-input { font-size:18px !important; letter-spacing:-.25px !important; }

body.responsive-phone .dock {
  --dock-icon-size:42px; --dock-slot-w:42px; --dock-slot-h:49px; --dock-h:56px;
  --dock-gap:6px; --dock-pad-x:9px; --dock-pad-top:6px; bottom:7px;
  max-width:calc(100vw - 12px); overflow:hidden;
}

@media (max-width:420px) {
  body.responsive-phone .dock {
    --dock-icon-size:38px; --dock-slot-w:38px; --dock-slot-h:45px; --dock-h:52px;
    --dock-gap:3px; --dock-pad-x:7px;
  }
  body.responsive-phone .settings-info-row,
  body.responsive-phone .settings-language-row { font-size:10px; }
}

@media (orientation:landscape) and (max-height:560px) {
  body.responsive-phone .window:not(.maximized) {
    border-radius:10px !important;
  }

  body.responsive-phone .dock {
    --dock-icon-size:32px; --dock-slot-w:32px; --dock-slot-h:37px; --dock-h:43px;
    --dock-gap:4px; --dock-pad-x:7px; --dock-pad-top:4px;
    bottom:3px;
  }

  body.responsive-phone #settings-window.system-window > .window-content {
    grid-template-columns:112px minmax(0,1fr) !important;
  }
  body.responsive-phone #settings-window .personal-settings-sidebar {
    padding:39px 5px 5px !important;
  }
  body.responsive-phone #settings-window .settings-account-mini {
    display:none;
  }
  body.responsive-phone #settings-window .settings-app-groups {
    gap:1px;
  }
  body.responsive-phone #settings-window .settings-app-group {
    gap:0;
  }
  body.responsive-phone #settings-window .settings-app-group + .settings-app-group {
    margin-top:3px;
  }
  body.responsive-phone #settings-window .settings-app-row {
    height:16px; font-size:7.5px; gap:4px; padding:0 2px;
  }
  body.responsive-phone #settings-window .settings-app-icon {
    width:12px; height:12px; flex-basis:12px; border-radius:3px;
  }
  body.responsive-phone #settings-window .settings-app-icon img {
    width:8px; height:8px;
  }
  body.responsive-phone #settings-window .settings-profile { display:none; }
  body.responsive-phone #settings-window .personal-settings-main {
    padding:40px 7px 5px !important; row-gap:5px;
  }
  body.responsive-phone #settings-window .settings-about-card {
    padding:6px 7px; font-size:7.5px; line-height:1.2;
  }
  body.responsive-phone #settings-window .settings-about-card p {
    margin-bottom:4px;
  }
  body.responsive-phone #settings-window .settings-language-row {
    min-height:20px; grid-template-columns:48px minmax(0,1fr); padding:0 6px;
  }
  body.responsive-phone #settings-window .settings-language-name {
    font-size:8px;
  }
  body.responsive-phone #settings-window .settings-language-card { margin-top:0 !important; }

  body.responsive-phone .maps-route-panel {
    top:5px; right:5px; width:min(216px,calc(100% - 10px));
    max-height:calc(100% - 10px); padding:5px;
  }

  body.responsive-phone #about-window.about-window:not(.maximized) {
    left:50% !important; top:28px !important;
    width:min(320px,calc(100vw - 20px)) !important;
    height:calc(100dvh - 80px) !important;
    transform:translateX(-50%) !important;
  }
  body.responsive-phone #about-window .about-body {
    overflow:auto !important;
  }

  body.responsive-phone #spotlight.spotlight {
    width:min(420px,calc(100vw - 24px)) !important;
  }
}