/* Small layout refinements that are shared across legacy app styles.
   Menubar dropdown material is intentionally centralized in material-lock.css. */

/* About card proportions and content rhythm. */
#about-window.about-window {
  width: 320px !important;
  height: 500px !important;
  min-width: 320px !important;
  min-height: 500px !important;
  max-width: 320px !important;
  max-height: 500px !important;
  border-radius: 11px !important;
  overflow: hidden !important;
}

#about-window .about-drag-zone {
  height: 46px !important;
}

#about-window .traffic-lights {
  left: 5px !important;
  top: 2px !important;
  gap: 2px !important;
}

#about-window .about-window-title {
  display: none !important;
}

#about-window .about-body {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
}

#about-window .about-macbook {
  position: absolute !important;
  left: 50% !important;
  top: 47px !important;
  width: 150px !important;
  height: 148px !important;
  transform: translateX(-50%) !important;
  background: url('../assets/icons/MacBook.png') center / contain no-repeat !important;
  filter: none !important;
}

#about-window .about-name {
  position: absolute !important;
  left: 0 !important;
  top: 237px !important;
  width: 100% !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.90) !important;
  font-size: 21px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.45px !important;
}

#about-window .about-subline {
  position: absolute !important;
  left: 0 !important;
  top: 263px !important;
  width: 100% !important;
  color: rgba(255, 255, 255, 0.42) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: 0.1px !important;
}

#about-window .about-copy,
#about-window .about-service {
  display: block !important;
  position: absolute !important;
  left: 50px !important;
  width: 220px !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 11px !important;
  line-height: 15px !important;
  letter-spacing: -0.08px !important;
}

#about-window .about-copy {
  top: 297px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 400 !important;
}

#about-window .about-service {
  top: 354px !important;
  color: rgba(255, 255, 255, 0.90) !important;
  font-weight: 600 !important;
}

#about-window .about-specs,
#about-window .about-cert,
#about-window .about-button.about-more {
  display: none !important;
}

#about-window .about-button {
  position: absolute !important;
  left: 50% !important;
  width: 114px !important;
  min-width: 114px !important;
  height: 21px !important;
  padding: 0 8px !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, 0.355) !important;
  color: rgba(255, 255, 255, 0.96) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -0.25px !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: default !important;
}

#about-window .about-button:hover {
  background: rgba(255, 255, 255, 0.38) !important;
}

#about-window .about-privacy {
  top: 391px !important;
}

#about-window .about-imprint {
  top: 420px !important;
}

#about-window .about-footer {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 462px !important;
  width: 100% !important;
  color: rgba(255, 255, 255, 0.42) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: -0.2px !important;
}

/* Spotlight proportions. */
.search-menubar-button {
  cursor: default !important;
}

#spotlight.spotlight {
  left: 50%;
  top: 50% !important;
  width: min(540px, calc(100% - 24px)) !important;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 13px !important;
  background: rgba(55, 55, 58, 0.74) !important;
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.09) inset !important;
  -webkit-backdrop-filter: blur(34px) saturate(135%) !important;
  backdrop-filter: blur(34px) saturate(135%) !important;
}

#spotlight .spotlight-search {
  height: 54px !important;
  padding: 0 16px !important;
  gap: 10px !important;
  cursor: grab;
  touch-action: none;
}

#spotlight.is-dragging .spotlight-search { cursor: grabbing; }
#spotlight .spotlight-search :is(input, button) { cursor: text; }

#spotlight .spotlight-search img {
  width: 22px !important;
  height: 22px !important;
  opacity: 0.78 !important;
  filter: invert(1) brightness(1.15) opacity(0.74) !important;
}

#spotlight-input {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 24px !important;
  font-weight: 430 !important;
  letter-spacing: -0.6px !important;
}

#spotlight-input::placeholder {
  color: rgba(255, 255, 255, 0.42) !important;
}

#spotlight .spotlight-results,
#spotlight .spotlight-result {
  color: rgba(255, 255, 255, 0.86) !important;
}

/* Borderless cards keep their designed inner composition when resized. */
#about-window .about-body {
  inset: 50% auto auto 50% !important;
  width: 320px !important;
  height: 500px !important;
  transform: translate(-50%, -50%) !important;
}

.about-drag-zone,
.music-drag-zone,
.facetime-drag-zone {
  pointer-events: none !important;
}

.window,
.window * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.window input,
.window textarea,
.legal-window .legal-content,
.legal-window .legal-content * {
  -webkit-user-select: text;
  user-select: text;
}

/* Mail and Projects have real app toolbars. In fullscreen those toolbars must
   never disappear: Mail must keep Send available and Projects must keep its
   navigation and search available. Only the separate traffic-light strip is
   revealed below the system menu, matching the Settings geometry. */
:is(.mail-window, .finder-window).maximized > .titlebar {
  position: absolute !important;
  inset: 0 0 auto !important;
  z-index: 24 !important;
  width: auto !important;
  height: var(--titlebar-h) !important;
  min-height: var(--titlebar-h) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  box-shadow: none !important;
  transition: top 240ms cubic-bezier(.22,.78,.22,1) !important;
}

body.menubar-revealed :is(.mail-window, .finder-window).maximized > .titlebar {
  top: calc(var(--menubar-h) + var(--titlebar-h)) !important;
  /* One opaque Sonoma toolbar material is used for both the app toolbar and
     the revealed traffic-light row. Using the old translucent glass token for
     the shadow made the upper row noticeably lighter over the wallpaper. */
  background: var(--sonoma-toolbar-material, rgb(54, 54, 54)) !important;
  box-shadow: 0 calc(-1 * var(--titlebar-h)) 0 var(--sonoma-toolbar-material, rgb(54, 54, 54)) !important;
  /* The synthetic traffic-light strip ends at the titlebar's top edge. Give
     it the same bottom divider used by the real Settings strip. */
  border-top: 1px solid rgba(0, 0, 0, 0.22) !important;
}

body.menubar-revealed .mail-window.maximized > .mail-titlebar {
  background: var(--sonoma-toolbar-material, rgb(54, 54, 54)) !important;
  box-shadow: 0 calc(-1 * var(--titlebar-h)) 0 var(--sonoma-toolbar-material, rgb(54, 54, 54)) !important;
}

/* Settings uses its titlebar itself as the folding traffic-light strip. Keep
   that strip on the same material as Mail and Projects. */
body.menubar-revealed #settings-window.system-window.maximized > .titlebar {
  background: var(--sonoma-toolbar-material, rgb(54, 54, 54)) !important;
  border-bottom-color: rgba(0, 0, 0, 0.22) !important;
}

:is(.mail-window, .finder-window).maximized > .titlebar > .traffic-lights {
  position: absolute !important;
  top: 14px !important;
  left: 15px !important;
  z-index: 30 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-58px) !important;
  transition: transform 240ms cubic-bezier(.22,.78,.22,1), opacity 150ms ease !important;
}

body.menubar-revealed :is(.mail-window, .finder-window).maximized > .titlebar > .traffic-lights {
  top: calc(-1 * var(--titlebar-h) + 10px) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.mail-window.maximized > .mail-titlebar::after { content: none !important; }

.mail-window.maximized > .mail-content,
.finder-window.maximized > .finder-body {
  position: absolute !important;
  inset: var(--titlebar-h) 0 0 !important;
  width: auto !important;
  height: auto !important;
  transition: top 240ms cubic-bezier(.22,.78,.22,1) !important;
}

body.menubar-revealed .mail-window.maximized > .mail-content,
body.menubar-revealed .finder-window.maximized > .finder-body {
  top: calc(var(--menubar-h) + var(--titlebar-h) + var(--titlebar-h)) !important;
}

/* A revealed fullscreen strip is an intentional active control surface. Show
   its coloured set immediately, even when another window had focus before the
   pointer reached the top edge. Hover still replaces these with the shared
   hover artwork from traffic-lights.css. */
body.menubar-revealed .window.maximized > .titlebar > .traffic-lights:not(:hover) > .close,
body.menubar-revealed .window.maximized > .traffic-lights:not(:hover) > .close {
  background-image: url('../assets/traffic-lights/close/default.svg') !important;
}

body.menubar-revealed .window.maximized > .titlebar > .traffic-lights:not(:hover) > .minimize:not(:disabled),
body.menubar-revealed .window.maximized > .traffic-lights:not(:hover) > .minimize:not(:disabled) {
  background-image: url('../assets/traffic-lights/minimize/default.svg') !important;
}

body.menubar-revealed .window.maximized > .titlebar > .traffic-lights:not(:hover) > .maximize,
body.menubar-revealed .window.maximized > .traffic-lights:not(:hover) > .maximize {
  background-image: url('../assets/traffic-lights/maximize/default.svg') !important;
}