/* Final material contract for every menu attached to the macOS menubar.
   Keep this file last: the menus may be glassy, but never transparent enough
   for window content or the wallpaper to remain legible through them. */
:root {
  --sonoma-menu-material: rgba(62, 61, 65, .88);
  --settings-light-material: rgba(82, 80, 87, .68);
  --settings-dark-material: rgba(29, 29, 32, .78);
  --mail-content-material: rgba(30, 29, 34, .72);
  --sonoma-toolbar-material: rgba(54, 54, 56, .76);
  --sonoma-shell-material: rgba(29, 29, 32, .28);
  --sonoma-material-filter: blur(46px) saturate(165%) brightness(.97);
  --settings-light-filter: var(--sonoma-material-filter);
  --settings-dark-filter: var(--sonoma-material-filter);
  --sonoma-divider: #242327;
  --sonoma-window-surface: var(--settings-dark-material);
  --sonoma-titlebar-surface: var(--sonoma-toolbar-material);
  --sonoma-content-surface: var(--settings-dark-material);
}

:is(.menu-dropdown, .logo-dropdown, .language-dropdown, .music-dropdown) {
  top: calc(var(--menubar-h) + 2px) !important;
  box-sizing: border-box !important;
  padding: 7px !important;
  gap: 1px !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  isolation: isolate;
  background-color: var(--sonoma-menu-material) !important;
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, .12) 0%,
    rgba(255, 255, 255, .045) 48%,
    rgba(0, 0, 0, .08) 100%) !important;
  background-clip: padding-box !important;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  border-radius: 10px !important;
  -webkit-backdrop-filter: blur(38px) saturate(150%) brightness(.92) !important;
  backdrop-filter: blur(38px) saturate(150%) brightness(.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    0 12px 30px rgba(0, 0, 0, .34),
    0 2px 5px rgba(0, 0, 0, .22) !important;
  color: rgba(255, 255, 255, .96) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.logo-dropdown {
  left: 0 !important;
  right: auto !important;
  width: 244px !important;
  min-width: 244px !important;
}

.language-dropdown {
  left: auto !important;
  right: 0 !important;
  width: 154px !important;
  min-width: 154px !important;
}

.logo-dropdown .logo-menu-option,
.language-dropdown .language-option {
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 5px !important;
}

.logo-dropdown .logo-menu-option:hover,
.language-dropdown .language-option:hover,
.language-dropdown .language-option.active:hover {
  color: #fff !important;
  background: var(--accent) !important;
}

.logo-dropdown .logo-menu-option { padding: 0 9px !important; }
.language-dropdown .language-option { padding: 0 8px !important; }

.music-dropdown {
  padding: 13px 14px 12px !important;
  gap: 0 !important;
}

.logo-dropdown .logo-menu-option:nth-child(2),
.logo-dropdown .logo-menu-option:nth-child(4) { position: relative; margin-top: 7px; }
.logo-dropdown .logo-menu-option:nth-child(2)::before,
.logo-dropdown .logo-menu-option:nth-child(4)::before {
  content: ""; position: absolute; left: 4px; right: 4px; top: -4px; height: 1px;
  background: rgba(255, 255, 255, .16); pointer-events: none;
}

:is(.menu-dropdown, .logo-dropdown, .language-dropdown, .music-dropdown)::before,
:is(.menu-dropdown, .logo-dropdown, .language-dropdown, .music-dropdown)::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.music-playing-indicator.is-playing,
.music-playing-indicator.active,
.music-playing-indicator:hover {
  background: var(--sonoma-shell-material) !important;
  box-shadow: none !important;
}

/* Keep the personal System Settings mockup on one stable Sonoma material.
   This contract intentionally lives in the final stylesheet so generic
   window/fullscreen rules cannot resize or recolour it later. */
#settings-window.system-window,
#settings-window.system-window.maximized {
  width: 780px !important;
  height: 520px !important;
  min-width: 780px !important;
  min-height: 520px !important;
  max-width: 780px !important;
  max-height: 520px !important;
  resize: none !important;
  overflow: hidden !important;
  background: var(--sonoma-shell-material) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, .42) !important;
  -webkit-backdrop-filter: var(--sonoma-material-filter) !important;
  backdrop-filter: var(--sonoma-material-filter) !important;
}

#settings-window.system-window > .titlebar {
  position: absolute !important;
  inset: 0 0 auto !important;
  z-index: 3 !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 16px !important;
  background: transparent !important;
  border-bottom: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#settings-window.system-window > .window-content {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 246px minmax(0, 1fr) !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#settings-window .personal-settings-sidebar {
  padding-top: 58px !important;
  padding-bottom: 18px !important;
  background: var(--settings-light-material) !important;
  border-right: 1px solid var(--sonoma-divider) !important;
  box-shadow:
    inset -1px 0 rgba(255, 255, 255, .045),
    inset 0 1px rgba(255, 255, 255, .075) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Four compact skill groups must finish on the same baseline as the rounded
   language card. Two pixels less per row remove the accumulated drift. */
#settings-window .settings-app-row { height: 23.75px !important; }
#settings-window .settings-app-groups {
  box-sizing: border-box !important;
  padding-bottom: 3.5px !important;
}

#settings-window .personal-settings-main {
  padding-top: 58px !important;
  background: var(--mail-content-material) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  gap: 14px !important;
}

#settings-window .settings-profile { margin: 8px 0 0 !important; }
/* Anchor the last card to the same lower baseline as Visual Studio Code in
   the sidebar.  The free space belongs between the two cards, not below the
   content where it makes the panes look vertically misaligned. */
#settings-window.system-window:not(.maximized) .settings-language-card { margin-top: auto !important; }
#settings-window.system-window.maximized .settings-language-card,
body.responsive-compact #settings-window .settings-language-card { margin-top: 0 !important; }

/* The two Settings panes are the colour source for all split window chrome.
   Toolbars/sidebar surfaces use the left material; actual document/content
   surfaces use the right material. Maps and video imagery remain untouched. */
.finder-window,
#settings-window.system-window,
#mail-window.mail-window,
.legal-window,
#maps-window.maps-window,
#safari-window.safari-window,
#music-window.music-window {
  background: var(--sonoma-shell-material) !important;
  -webkit-backdrop-filter: var(--sonoma-material-filter) !important;
  backdrop-filter: var(--sonoma-material-filter) !important;
}

.window:not(.facetime-window):not(.about-window):not(.system-window) {
  --sonoma-window-surface: var(--settings-dark-material) !important;
  --sonoma-titlebar-surface: var(--sonoma-toolbar-material) !important;
  --sonoma-content-surface: var(--settings-dark-material) !important;
}

:is(.finder-window, #mail-window.mail-window, .legal-window, #maps-window.maps-window, #safari-window.safari-window) > .titlebar {
  background: var(--sonoma-toolbar-material) !important;
  border-bottom: 1px solid var(--sonoma-divider) !important;
  -webkit-backdrop-filter: blur(34px) saturate(135%) !important;
  backdrop-filter: blur(34px) saturate(135%) !important;
}

/* Safari's webpage remains opaque, but its surrounding window shell must use
   the same material as Maps.  A thinner special shell allowed warm wallpaper
   colours to bleed into the toolbar and made equal RGBA values look unequal. */
#safari-window.safari-window {
  background: var(--sonoma-shell-material) !important;
  -webkit-backdrop-filter: var(--sonoma-material-filter) !important;
  backdrop-filter: var(--sonoma-material-filter) !important;
}

#safari-window.safari-window > .safari-titlebar {
  background: var(--sonoma-toolbar-material) !important;
  border-bottom: 1px solid var(--sonoma-divider) !important;
  box-shadow:
    inset 0 -1px rgba(255, 255, 255, .025) !important;
  -webkit-backdrop-filter: blur(34px) saturate(135%) !important;
  backdrop-filter: blur(34px) saturate(135%) !important;
}

#safari-window .safari-address {
  background: rgba(255,255,255,.085) !important;
  border-color: rgba(255,255,255,.24) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.075),
    0 1px 2px rgba(0,0,0,.18) !important;
}

.finder-window .finder-body > .window-content,
.legal-window .legal-content,
#music-window .window-content.music-content {
  background: var(--settings-dark-material) !important;
  -webkit-backdrop-filter: blur(38px) saturate(140%) brightness(.9) !important;
  backdrop-filter: blur(38px) saturate(140%) brightness(.9) !important;
}

/* Settings and Mail use one shared content colour and one shell blur. Keeping
   the large child panes unfiltered avoids WebKit's visible blur tiles. */
#mail-window.mail-window {
  background: var(--sonoma-shell-material) !important;
  -webkit-backdrop-filter: var(--sonoma-material-filter) !important;
  backdrop-filter: var(--sonoma-material-filter) !important;
}

#mail-window.mail-window > .titlebar,
#mail-window .mail-content {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#mail-window .mail-content {
  background: var(--mail-content-material) !important;
}

.finder-window .folder-grid.finder-list {
  background: repeating-linear-gradient(to bottom,
    rgba(255, 255, 255, .035) 0,
    rgba(255, 255, 255, .035) 22px,
    transparent 22px,
    transparent 44px) !important;
  background-position: 0 25px !important;
}

.finder-window .finder-list-header {
  background: rgba(255, 255, 255, .045) !important;
  border-bottom-color: var(--sonoma-divider) !important;
}

.finder-window .finder-list-sort {
  border-right-color: var(--sonoma-divider) !important;
}

.finder-window .finder-pdf-sidebar,
#maps-window .maps-route-panel,
#maps-window .maps-info-panel,
#mail-window .mail-feedback-sheet {
  background: rgba(82, 80, 87, .74) !important;
  -webkit-backdrop-filter: var(--settings-light-filter) !important;
  backdrop-filter: var(--settings-light-filter) !important;
}

#mail-window .mail-row,
.finder-window .finder-pdf-sidebar {
  border-color: var(--sonoma-divider) !important;
}

/* Mail's subject header has a native two-tone separator.  Keep it explicit
   because the shared dark divider otherwise disappears into this material. */
#mail-window .mail-row {
  border-bottom: 1px solid rgba(255, 255, 255, .13) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .34) !important;
}

/* The feedback sheet follows the lavender graphite frame of Sonoma's Mail
   alert instead of inheriting the colder generic panel outline. */
#mail-window .mail-feedback-sheet {
  background-color: rgba(76, 72, 81, .94) !important;
  border: 1px solid rgba(151, 145, 160, .88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 20px 48px rgba(0, 0, 0, .48) !important;
}

#maps-window .maps-route-panel:hover {
  background: rgba(91, 89, 96, .80) !important;
}

.finder-window .finder-pdf-page-stage,
.finder-window .finder-preview {
  background: var(--settings-dark-material) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.finder-window .finder-preview:has(.finder-pdf-viewer) {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* A preview supplies its own light/dark panes. Leaving the Finder content
   material underneath would compound the opacity and make previews flatter. */
.finder-window.file-preview-open .finder-body > .window-content {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#settings-window .traffic-lights :is(.minimize, .maximize):disabled,
#settings-window .traffic-lights :is(.minimize, .maximize).disabled-dot {
  background-color: transparent !important;
  background-image: url('../assets/traffic-lights/disabled.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px 12px !important;
  border: 0 !important;
  opacity: 1 !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* Match About This User: when Settings loses focus all three controls are
   neutral. Use the slightly lighter neutral artwork here because this
   titlebar is lighter than the About surface. */
#settings-window:not(.focused) .traffic-lights:not(:hover) > .close {
  background-image: url('../assets/traffic-lights/disabled.svg') !important;
}

/* One canonical Sonoma titlebar, measured from Maps.  Keep this final in the
   cascade so older app-specific titlebar rules cannot change its geometry. */
:is(.finder-window, #mail-window.mail-window, .legal-window, #maps-window.maps-window):not(.maximized) > .titlebar {
  box-sizing: border-box !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  gap: 14px !important;
  background: var(--sonoma-toolbar-material) !important;
  border-bottom: 1px solid var(--sonoma-divider) !important;
  box-shadow:
    inset 0 -1px rgba(255, 255, 255, .025) !important;
  -webkit-backdrop-filter: blur(34px) saturate(135%) !important;
  backdrop-filter: blur(34px) saturate(135%) !important;
}

:is(.finder-window, #mail-window.mail-window, .legal-window, #maps-window.maps-window):not(.maximized) > .titlebar :is(.window-title, .mail-window-title, .maps-window-title) {
  margin-left: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 720 !important;
  letter-spacing: -.15px !important;
}

/* Safari needs six extra pixels for its address field, but its outer material,
   inset, traffic-light position and divider are the same titlebar system. */
#safari-window.safari-window:not(.maximized) > .safari-titlebar {
  box-sizing: border-box !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 0 16px !important;
  gap: 14px !important;
  background: var(--sonoma-toolbar-material) !important;
  border-bottom: 1px solid var(--sonoma-divider) !important;
  box-shadow:
    inset 0 -1px rgba(255, 255, 255, .025) !important;
  -webkit-backdrop-filter: blur(34px) saturate(135%) !important;
  backdrop-filter: blur(34px) saturate(135%) !important;
}