/* ============================================================
   macOS Web — PRECISION pass
   Pixel-tuned to macOS Sonoma/Sequoia (modern theme).
   Scoped to body:not(.aqua) so the Crystal theme is untouched.
   ============================================================ */

:root { --menubar-h: 24px; }

body:not(.aqua) {
  letter-spacing: -0.01em;
  font-feature-settings: "cv01", "ss01";
}
body:not(.aqua) .terminal,
body:not(.aqua) .term-input { letter-spacing: 0; }

/* ============================================================
   MENU BAR
   ============================================================ */
body:not(.aqua) #menubar {
  height: 24px;
  padding: 0 8px;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(45px) saturate(1.9);
  -webkit-backdrop-filter: blur(45px) saturate(1.9);
  box-shadow: inset 0 -0.5px 0 rgba(0,0,0,0.07);
  font-size: 13px;
  color: #1a1a1c;
}
body.dark:not(.aqua) #menubar { background: rgba(28,28,30,0.42); color: #f2f2f2; box-shadow: inset 0 -0.5px 0 rgba(255,255,255,0.06); }
body:not(.aqua) .menu-item { height: 18px; line-height: 18px; padding: 0 8px; border-radius: 5px; }
body:not(.aqua) #menubar .menu-item:hover,
body:not(.aqua) #menubar .menu-item.active { background: rgba(0,0,0,0.09); color: inherit; }
body.dark:not(.aqua) #menubar .menu-item:hover,
body.dark:not(.aqua) #menubar .menu-item.active { background: rgba(255,255,255,0.16); }
body:not(.aqua) .menu-apple { padding: 0 8px; }
body:not(.aqua) .menu-appname { font-weight: 600; }
body:not(.aqua) .menu-status { height: 18px; padding: 0 7px; }
body:not(.aqua) .menu-clock { font-size: 13px; font-weight: 400; }

/* dropdowns / context menus */
body:not(.aqua) #menu-dropdown,
body:not(.aqua) #context-menu {
  padding: 4px; border-radius: 7px; min-width: 200px;
  background: rgba(243,243,243,0.68);
  backdrop-filter: blur(50px) saturate(1.8);
  -webkit-backdrop-filter: blur(50px) saturate(1.8);
  border: 0.5px solid rgba(0,0,0,0.1);
  box-shadow: 0 12px 42px rgba(0,0,0,0.26), 0 0 0 0.5px rgba(0,0,0,0.04);
  font-size: 13px;
}
body.dark:not(.aqua) #menu-dropdown,
body.dark:not(.aqua) #context-menu { background: rgba(40,40,42,0.72); border-color: rgba(255,255,255,0.1); color: #eee; }
body:not(.aqua) .dropdown-item { padding: 3px 11px; min-height: 22px; border-radius: 5px; }
body:not(.aqua) .dropdown-item:hover:not(.disabled) { background: var(--accent); color: #fff; }
body:not(.aqua) .dropdown-sep { margin: 4px 8px; background: rgba(0,0,0,0.1); }
body.dark:not(.aqua) .dropdown-sep { background: rgba(255,255,255,0.1); }

/* ============================================================
   WINDOWS — corner radius, shadow, title, traffic lights
   ============================================================ */
body:not(.aqua) .window {
  border-radius: 10px;
  box-shadow: 0 22px 70px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.13);
}
body.dark:not(.aqua) .window { box-shadow: 0 24px 74px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(255,255,255,0.08); }

body:not(.aqua) .titlebar { height: 30px; padding: 0 13px; }
body:not(.aqua) .win-title { font-size: 13px; font-weight: 600; color: #4a4a4d; padding: 0 96px; letter-spacing: -0.01em; }
body.dark:not(.aqua) .win-title { color: #c7c7c9; }
body:not(.aqua) .window.inactive .win-title { color: #b0b0b2; }

/* traffic lights — exact macOS metrics */
body:not(.aqua) .traffic { gap: 8px; }
body:not(.aqua) .traffic button {
  width: 12px; height: 12px;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.14);
}
body:not(.aqua) .traffic .tl-close { background: #ff5f57; }
body:not(.aqua) .traffic .tl-min { background: #febc2e; }
body:not(.aqua) .traffic .tl-max { background: #28c840; }
body:not(.aqua) .window.inactive .traffic button { background: #d8d8da; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.08); }
body.dark:not(.aqua) .window.inactive .traffic button { background: #4a4a4c; }
/* glyphs reveal when hovering the traffic-light cluster (macOS behaviour) */
body:not(.aqua) .traffic button { position: relative; }
body:not(.aqua) .traffic button svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.12s; }
body:not(.aqua) .titlebar:hover .traffic button svg { opacity: 0; }
body:not(.aqua) .titlebar:hover .traffic:hover button svg,
body:not(.aqua) .traffic:hover button svg { opacity: 0.9; }

/* ============================================================
   DOCK — refined panel, icons, indicators, labels
   ============================================================ */
body:not(.aqua) #dock {
  gap: 4px;
  padding: 5px 6px;
  border-radius: 22px;
  background: rgba(190,192,200,0.26);
  border: 0.5px solid rgba(255,255,255,0.32);
  border-top-color: rgba(255,255,255,0.5);
  backdrop-filter: blur(50px) saturate(1.9);
  -webkit-backdrop-filter: blur(50px) saturate(1.9);
  box-shadow:
    0 0 0 0.5px rgba(0,0,0,0.05),
    0 16px 44px rgba(0,0,0,0.34),
    inset 0 0.5px 0 rgba(255,255,255,0.55);
}
body.dark:not(.aqua) #dock {
  background: rgba(46,46,52,0.42);
  border-color: rgba(255,255,255,0.12);
  border-top-color: rgba(255,255,255,0.2);
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.3), 0 16px 44px rgba(0,0,0,0.5), inset 0 0.5px 0 rgba(255,255,255,0.16);
}
body:not(.aqua) .dock-item img,
body:not(.aqua) .dock-item svg.app-icon {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.20));
}
body:not(.aqua) .dock-indicator {
  width: 4px; height: 4px; bottom: -2px;
  background: rgba(0,0,0,0.5);
  box-shadow: none;
}
body.dark:not(.aqua) .dock-indicator { background: rgba(255,255,255,0.72); }
body:not(.aqua) .dock-sep { height: 38px; margin: 0 4px; background: rgba(0,0,0,0.16); }
body.dark:not(.aqua) .dock-sep { background: rgba(255,255,255,0.16); }

/* dock label tooltip */
body:not(.aqua) .dock-item .dock-label {
  bottom: calc(100% + 16px);
  background: rgba(60,60,62,0.94);
  color: #fff; font-size: 12px; font-weight: 500;
  padding: 4px 11px; border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3), 0 0 0 0.5px rgba(0,0,0,0.2);
}
body:not(.aqua) .dock-item .dock-label::after { border-top-color: rgba(60,60,62,0.94); }

/* vertical docks: indicator on inner edge handled by base transforms */

/* ============================================================
   SIDEBARS (source-list vibrancy + macOS selection)
   ============================================================ */
body:not(.aqua) .app-sidebar {
  background: rgba(246,246,248,0.6);
  backdrop-filter: blur(42px) saturate(1.7);
  -webkit-backdrop-filter: blur(42px) saturate(1.7);
  border-right: 0.5px solid rgba(0,0,0,0.08);
}
body.dark:not(.aqua) .app-sidebar { background: rgba(34,34,36,0.55); border-right-color: rgba(255,255,255,0.06); }
body:not(.aqua) .sidebar-item { min-height: 24px; border-radius: 6px; font-size: 13px; }
body:not(.aqua) .sidebar-item.active { background: rgba(0,0,0,0.09); color: inherit; font-weight: 500; }
body.dark:not(.aqua) .sidebar-item.active { background: rgba(255,255,255,0.14); }
body:not(.aqua) .sidebar-section { font-size: 11px; font-weight: 600; color: #8d8d92; }

/* ============================================================
   THIN OVERLAY SCROLLBARS
   ============================================================ */
body:not(.aqua) ::-webkit-scrollbar { width: 9px; height: 9px; }
body:not(.aqua) ::-webkit-scrollbar-track { background: transparent; }
body:not(.aqua) ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border: 2px solid transparent; border-radius: 5px; background-clip: content-box;
}
body:not(.aqua) ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.38); background-clip: content-box; }
body.dark:not(.aqua) ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); background-clip: content-box; }
body.dark:not(.aqua) ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.36); background-clip: content-box; }

/* ============================================================
   CONTROL CENTER / SPOTLIGHT fine-tuning
   ============================================================ */
body:not(.aqua) #spotlight-input { letter-spacing: -0.02em; }
body:not(.aqua) .spot-result.sel { border-radius: 8px; }