/* Desktop shell: menu bar, dock, menus. */

/* Absolute rather than fixed, and without a z-index of its own, so it is not a
   stacking context: the windows inside it then stack against the mascot, the
   dock and the menu bar directly, which is what lets the mascot walk under
   the windows and stand on the dock. */
.desktop {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ---------- Menu bar ---------- */

.menubar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--menubar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: var(--menubar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0.5px 0 var(--hairline);
  z-index: 10000;
  font-size: 13px;
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
}

.menubar-left,
.menubar-right {
  display: flex;
  align-items: center;
  gap: 2px;
}

.menubar-item {
  padding: 2px 9px;
  border-radius: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  height: 21px;
}

button.menubar-item:hover,
button.menubar-item[aria-expanded="true"] {
  background: rgba(127, 127, 132, 0.22);
}

.menubar-s {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  transform: translateY(-0.5px);
}

.menubar-appname { font-weight: 700; }

.menubar-ghost { color: var(--ink); opacity: 0.85; }

.menubar-glyph { padding: 2px 7px; }
.menubar-glyph svg { display: block; }

.menubar-clock {
  padding: 2px 6px 2px 9px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Dropdown menu ---------- */

.menu-dropdown {
  position: fixed;
  min-width: 224px;
  padding: 5px;
  border-radius: 8px;
  background: var(--menu-bg);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  box-shadow:
    0 0 0 0.5px var(--hairline-strong),
    0 12px 36px rgba(0, 0, 0, 0.32);
  z-index: 10001;
  font-size: 13px;
}

.menu-dropdown [role="menuitem"] {
  display: block;
  width: 100%;
  text-align: left;
  padding: 4px 10px;
  border-radius: 5px;
  line-height: 1.45;
}

.menu-dropdown [role="menuitem"]:hover,
.menu-dropdown [role="menuitem"]:focus-visible {
  background: var(--accent);
  color: #ffffff;
  outline: none;
}

.menu-separator {
  height: 1px;
  margin: 5px 10px;
  background: var(--hairline);
}

/* ---------- Dock ---------- */

.dock-zone {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding-bottom: 8px;
  z-index: 9000;
  pointer-events: none;
}

.dock {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 22px;
  background: var(--dock-bg);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  box-shadow:
    inset 0 0 0 0.5px var(--dock-hairline),
    0 0 0 0.5px rgba(0, 0, 0, 0.18),
    0 10px 30px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
}

.dock-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 2px 6px;
}

.dock-icon {
  width: 56px;
  height: 56px;
  display: block;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
  will-change: transform;
}

.dock.is-settling .dock-icon {
  transition: transform 0.22s var(--ease-out);
}

.dock-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dock-item:active .dock-icon {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3)) brightness(0.8);
}

.dock-item:focus-visible .dock-icon {
  transform: scale(1.18) translateY(-6px);
}

.dock-dot {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.dock-item.is-open .dock-dot { opacity: 0.65; }

.dock-item::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--tooltip-bg);
  color: var(--ink);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow:
    0 0 0 0.5px var(--hairline-strong),
    0 5px 16px rgba(0, 0, 0, 0.25);
  font-size: 12.5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease 0.08s, transform 0.12s var(--ease-out) 0.08s;
}

.dock-item:hover::after,
.dock-item:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .dock-icon { transition: none; }
  .dock-item:focus-visible .dock-icon { transform: none; }
}

/* ---------- the app switcher ---------- */

/* The dock's material, centred: the same glass, hairline and blur, so the
   panel reads as part of the same chrome rather than a dialog. */
.switcher {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 10px;
  padding: 18px 20px 14px;
  border-radius: 24px;
  background: var(--dock-bg);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  box-shadow:
    inset 0 0 0 0.5px var(--dock-hairline),
    0 0 0 0.5px rgba(0, 0, 0, 0.18),
    0 24px 70px rgba(0, 0, 0, 0.4);
  z-index: 9500;
  outline: none;
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
}

.switcher-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 96px;
  padding: 10px 8px 8px;
  border-radius: 14px;
}

.switcher-item.is-current { background: rgba(127, 127, 132, 0.24); }

.switcher-icon {
  display: block;
  width: 64px;
  height: 64px;
}

.switcher-icon svg { display: block; width: 100%; height: 100%; }

/* Only the highlighted window is named; the rest keep their place in the
   row so the panel does not reflow as the highlight moves. */
.switcher-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  visibility: hidden;
}

.switcher-item.is-current .switcher-name { visibility: visible; }

/* ---------- Mission Control ---------- */

/* Sits above the widgets and the mascot and below every window, so the
   desktop dims and the windows stay lit. */
.mission-dim {
  position: absolute;
  inset: 0;
  z-index: 9;
  background: rgba(0, 0, 0, 0.36);
}

/* Above the windows: a transparent target over each tile for the pointer
   and the keyboard, and the title beneath it. */
.mission-hits {
  position: fixed;
  inset: 0;
  z-index: 8500;
}

.mission-hit {
  position: absolute;
  border-radius: var(--radius-window);
  background: transparent;
}

.mission-hit:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-window);
}

.mission-label {
  position: absolute;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(20, 20, 24, 0.5);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

/* ---------- Spotlight ---------- */

.menubar-search { cursor: default; }
.menubar-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }

.spotlight {
  position: fixed;
  inset: 0;
  z-index: 9600;
  background: rgba(0, 0, 0, 0.28);
}

/* The switcher's material, at the height a hand expects a search field. */
.spot-panel {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 48px));
  max-height: 64vh;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--dock-bg);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  box-shadow:
    inset 0 0 0 0.5px var(--dock-hairline),
    0 0 0 0.5px rgba(0, 0, 0, 0.18),
    0 24px 70px rgba(0, 0, 0, 0.4);
  color: var(--ink);
  overflow: hidden;
}

.spot-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}

.spot-glyph { display: flex; color: var(--ink-2); }
.spot-glyph svg { width: 18px; height: 18px; }

.spot-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 20px;
  line-height: 1.3;
  outline: none;
}

.spot-input::placeholder { color: var(--ink-2); }
.spot-input::-webkit-search-cancel-button { display: none; }

.spot-list {
  overflow-y: auto;
  padding: 4px 8px 10px;
  box-shadow: inset 0 0.5px 0 var(--hairline);
}

.spot-group {
  padding: 10px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.spot-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 10px;
  border-radius: 8px;
}

.spot-row.is-current { background: var(--accent); color: #ffffff; }

.spot-title { font-size: 14px; line-height: 1.35; }

.spot-sub {
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spot-row.is-current .spot-sub { color: rgba(255, 255, 255, 0.82); }

/* Underlined, not emboldened: the weight of the line stays the same. */
.spot-hit { text-decoration: underline; text-underline-offset: 2px; }