/* ═══════════════════════════════════════════════════════════════
   desktop.css — menu bar, dock, desktop icons, launcher,
                 popovers, context menu, notifications
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────── MENU BAR ───────────────────── */
.menubar {
  position: relative;
  z-index: 400;
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  height: var(--menubar-h);
  padding: 0 8px;
  border-radius: 0;
  --g-alpha: .07;
  --g-blur: 26px;
  box-shadow:
    inset 0 -1px 0 rgb(var(--edge-lo) / .12),
    inset 0 1px 0 rgb(var(--edge-hi) / .16),
    0 1px 14px -4px rgb(var(--edge-lo) / .4);
}
.menubar::before { display: none; }  /* a bar has no free edges to rim */

.mb-item {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 21px;
  padding: 0 9px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  border-radius: var(--g-radius-2xs);
}
.mb-item:hover { color: var(--text); }
.mb-logo { padding: 0 8px; }
.mb-icon { padding: 0 7px; }
#mb-appname { font-weight: 650; color: var(--text); }
.mb-spacer { flex: 1; }
#mb-avatar { padding: 0 5px; }
#mb-avatar .av { width: 20px; height: 20px; font-size: 10px; }

.mb-clock {
  gap: 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
#clock-time { font-weight: 550; color: var(--text); }

/* ───────────────────── POPOVER MENUS ───────────────────── */
.menu-pop, .ctx {
  position: absolute;
  z-index: 800;
  min-width: 208px;
  padding: 6px;
  border-radius: var(--g-radius-sm);
  --g-blur: 30px;
  --g-alpha: .1;
  box-shadow: var(--g-inset), var(--shadow-deep);
  animation: popIn 180ms var(--ease-back);
  transform-origin: top left;
}
@keyframes popIn { from { opacity: 0; transform: scale(.94) translateY(-6px); } }

.mi {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 27px;
  padding: 0 9px;
  border-radius: var(--g-radius-2xs);
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  cursor: default;
}
.mi:hover {
  background: linear-gradient(110deg, hsl(var(--accent) / .42), hsl(var(--accent-2) / .34));
  box-shadow: inset 0 1px 0 rgb(var(--edge-hi) / .3),
              inset 0 -1px 6px -3px rgb(var(--refract-warm) / .5);
  color: #fff;
}
[data-theme="lumen"] .mi:hover { color: #fff; }
.mi svg { flex: none; opacity: .75; }
.mi .k {
  margin-left: auto;
  padding-left: 18px;
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.mi:hover .k { color: rgb(255 255 255 / .7); }
.mi.dim { color: var(--text-3); pointer-events: none; }
.mi-title {
  padding: 6px 9px 4px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ───────────────────── DESKTOP ICONS ───────────────────── */
.desk-icons {
  position: absolute;
  inset: calc(var(--menubar-h) + 12px) 12px calc(var(--dock-h) + 26px) 12px;
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(auto-fill, 86px);
  grid-auto-rows: 92px;
  grid-auto-flow: column;
  justify-content: end;
  align-content: start;
  gap: 4px;
  direction: rtl;
}
.di {
  direction: ltr;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 9px 4px;
  border-radius: var(--g-radius-sm);
  cursor: default;
  transition: background 160ms linear, box-shadow 160ms linear;
}
.di:hover { background: rgb(var(--edge-hi) / .09); }
.di.sel {
  background: rgb(var(--edge-hi) / .15);
  box-shadow: inset 0 0 0 .5px rgb(var(--edge-hi) / .3);
}
.di-glyph {
  position: relative;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--g-radius-sm);
  color: var(--text);
  background: linear-gradient(155deg,
    rgb(var(--g-tint) / .22), rgb(var(--g-tint) / .05) 55%, rgb(var(--g-tint) / .16));
  backdrop-filter: blur(12px) saturate(170%) brightness(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(170%) brightness(1.08);
  box-shadow:
    inset 0 1.5px 9px -4px rgb(var(--refract-cool) / .8),
    inset 0 -1.5px 9px -4px rgb(var(--refract-warm) / .6),
    inset 0 1px 0 rgb(var(--edge-hi) / .45),
    0 0 0 .5px rgb(var(--edge-hi) / .18),
    0 6px 16px -6px rgb(var(--edge-lo) / .45);
}
.di-label {
  max-width: 78px;
  font-size: 11.5px;
  text-align: center;
  color: var(--text);
  text-shadow: 0 1px 3px rgb(0 0 0 / .55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-theme="lumen"] .di-label { text-shadow: 0 1px 3px rgb(255 255 255 / .7); }

/* ───────────────────── DOCK ───────────────────── */
.dock-wrap {
  position: absolute;
  bottom: 12px; left: 0; right: 0;
  z-index: 450;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.dock {
  pointer-events: auto;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: var(--dock-h);
  padding: 8px 10px;
  border-radius: var(--g-radius);
  --g-blur: 28px;
  --g-alpha: .1;
  box-shadow:
    inset 0 1.5px 14px -6px rgb(var(--refract-cool) / .8),
    inset 0 -1.5px 14px -6px rgb(var(--refract-warm) / .6),
    inset 0 1px 0 rgb(var(--edge-hi) / .35),
    var(--shadow-deep);
}
.dock-sep {
  align-self: center;
  width: 1px; height: 34px;
  margin: 0 3px;
  background: linear-gradient(180deg, transparent, rgb(var(--edge-hi) / .3), transparent);
}
.dk {
  position: relative;
  flex: none;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--g-radius-sm);
  color: var(--text);
  background: linear-gradient(155deg,
    rgb(var(--g-tint) / .20), rgb(var(--g-tint) / .04) 55%, rgb(var(--g-tint) / .15));
  box-shadow:
    inset 0 1.5px 9px -4px rgb(var(--refract-cool) / .85),
    inset 0 -1.5px 9px -4px rgb(var(--refract-warm) / .65),
    inset 0 1px 0 rgb(var(--edge-hi) / .5),
    0 0 0 .5px rgb(var(--edge-hi) / .2),
    0 4px 12px -6px rgb(var(--edge-lo) / .5);
  transform-origin: bottom center;
  transition: transform 220ms var(--ease-back), box-shadow 220ms var(--ease);
  cursor: default;
}
.dk:hover {
  transform: translateY(-9px) scale(1.14);
  box-shadow:
    inset 0 2px 12px -4px rgb(var(--refract-cool) / 1),
    inset 0 -2px 12px -4px rgb(var(--refract-warm) / .8),
    inset 0 1px 0 rgb(var(--edge-hi) / .65),
    0 0 0 .5px rgb(var(--edge-hi) / .3),
    0 14px 26px -8px rgb(var(--edge-lo) / .55);
}
.dk:active { transform: translateY(-4px) scale(1.03); }
/* neighbours of the hovered icon lift slightly — dock magnification */
.dk:hover + .dk, .dk:has(+ .dk:hover) { transform: translateY(-4px) scale(1.06); }

.dk-dot {
  position: absolute;
  bottom: -5px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: var(--r-round);
  background: rgb(var(--edge-hi) / .8);
  box-shadow: 0 0 6px rgb(var(--edge-hi) / .8);
  opacity: 0;
  transition: opacity 200ms linear;
}
.dk.running .dk-dot { opacity: 1; }

.dk-tip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 10px;
  border-radius: var(--g-radius-xs);
  font-size: 11.5px;
  white-space: nowrap;
  color: var(--text);
  background: rgb(var(--g-tint) / .14);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    inset 0 0 0 .5px rgb(var(--edge-hi) / .28),
    inset 0 1px 6px -3px rgb(var(--refract-cool) / .6),
    0 6px 16px -6px rgb(var(--edge-lo) / .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms linear, transform 200ms var(--ease-back);
}
.dk:hover .dk-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ───────────────────── LAUNCHER / SPOTLIGHT ───────────────────── */
.launcher {
  position: absolute;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 13vh;
  background: rgb(var(--edge-lo) / .28);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  animation: fadeIn 200ms var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } }
.launcher.closing { animation: fadeOut 150ms var(--ease) forwards; }
@keyframes fadeOut { to { opacity: 0; } }

.launcher-inner {
  width: min(620px, 92vw);
  max-height: 66vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  --g-blur: 34px;
  --g-alpha: .11;
  box-shadow: var(--g-inset), var(--shadow-deep);
  animation: lchIn 300ms var(--ease-back);
}
@keyframes lchIn { from { opacity: 0; transform: scale(.94) translateY(-16px); } }

.lch-search {
  position: relative;
  z-index: 3;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  height: 58px;
  box-shadow: inset 0 -1px 0 rgb(var(--edge-hi) / .13);
}
.lch-search svg { flex: none; opacity: .5; }
.lch-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 17px;
  font-weight: 350;
  color: var(--text);
  user-select: text;
}
.lch-search input::placeholder { color: var(--text-3); }

.lch-results { position: relative; z-index: 3; overflow-y: auto; padding: 8px; }
.lch-group {
  padding: 8px 10px 5px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.lch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--g-radius-xs);
  cursor: default;
}
.lch-row .li {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--g-radius-xs);
  background: rgb(var(--g-tint) / .14);
  box-shadow: inset 0 0 0 .5px rgb(var(--edge-hi) / .22),
              inset 0 1px 6px -3px rgb(var(--refract-cool) / .6);
}
.lch-row .lt2 { flex: 1; min-width: 0; }
.lch-row .lt2 b { display: block; font-size: 13px; font-weight: 550; }
.lch-row .lt2 i {
  display: block;
  font-size: 11px;
  font-style: normal;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lch-row .lk { font-size: 10.5px; color: var(--text-3); }
.lch-row.on {
  background: linear-gradient(110deg, hsl(var(--accent) / .4), hsl(var(--accent-2) / .3));
  box-shadow: inset 0 1px 0 rgb(var(--edge-hi) / .3),
              inset 0 -1px 8px -4px rgb(var(--refract-warm) / .55);
  color: #fff;
}
.lch-row.on .lt2 i, .lch-row.on .lk { color: rgb(255 255 255 / .72); }

/* ───────────────────── NOTIFICATIONS ───────────────────── */
.toasts {
  position: absolute;
  top: calc(var(--menubar-h) + 12px);
  right: 14px;
  z-index: 850;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 304px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  gap: 11px;
  padding: 12px 13px;
  border-radius: var(--g-radius-sm);
  --g-blur: 28px;
  --g-alpha: .12;
  box-shadow: var(--g-inset), var(--shadow-deep);
  animation: toastIn 380ms var(--ease-back);
}
@keyframes toastIn { from { opacity: 0; transform: translateX(40px) scale(.94); } }
.toast.out { animation: toastOut 260ms var(--ease) forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px) scale(.94); } }
.toast .ti {
  position: relative; z-index: 3;
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--g-radius-xs);
  background: rgb(var(--g-tint) / .16);
  box-shadow: inset 0 0 0 .5px rgb(var(--edge-hi) / .25),
              inset 0 1px 6px -3px rgb(var(--refract-cool) / .7);
}
.toast .tc { position: relative; z-index: 3; flex: 1; min-width: 0; }
.toast .tc b { display: block; font-size: 12.5px; font-weight: 600; }
.toast .tc p { margin: 2px 0 0; font-size: 11.5px; color: var(--text-2); line-height: 1.45; }

/* ───────────────────── DIALOG ───────────────────── */
.dlg-veil {
  position: absolute;
  inset: 0;
  z-index: 880;
  display: grid;
  place-items: center;
  background: rgb(var(--edge-lo) / .3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: fadeIn 180ms var(--ease);
}
.dlg {
  width: min(400px, 88vw);
  padding: 20px;
  --g-blur: 32px;
  --g-alpha: .12;
  box-shadow: var(--g-inset), var(--shadow-deep);
  animation: lchIn 280ms var(--ease-back);
}
.dlg > * { position: relative; z-index: 3; }
.dlg h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.dlg p { margin: 0 0 16px; font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.dlg .row { display: flex; gap: 8px; justify-content: flex-end; }


/* ═══════════════════ DOCK POSITION & BEHAVIOUR ═══════════════════
   The dock can live on any of three edges, with magnification and
   auto-hide as separate switches. Icon size drives --dock-h, which
   the desktop-icon and widget layers key their insets off, so
   nothing ever ends up parked underneath it. */
.dk { width: var(--dk-size, 46px); height: var(--dk-size, 46px); }

.dock-wrap[data-pos="left"], .dock-wrap[data-pos="right"] {
  top: var(--menubar-h); bottom: 0;
  left: auto; right: auto;
  align-items: center;
  width: auto;
}
.dock-wrap[data-pos="left"]  { left: 12px; }
.dock-wrap[data-pos="right"] { right: 12px; }

.dock[data-pos="left"], .dock[data-pos="right"] {
  flex-direction: column;
  align-items: center;
  height: auto;
  width: var(--dock-h);
  padding: 10px 8px;
}
.dock[data-pos="left"] .dock-sep,
.dock[data-pos="right"] .dock-sep {
  width: 34px; height: 1px; margin: 3px 0;
  background: linear-gradient(90deg, transparent, rgb(var(--edge-hi) / .3), transparent);
}
.dock[data-pos="left"]  .dk:hover { transform: translateX(9px) scale(1.14); }
.dock[data-pos="right"] .dk:hover { transform: translateX(-9px) scale(1.14); }
.dock[data-pos="left"] .dk-tip {
  bottom: auto; left: calc(100% + 14px); top: 50%;
  transform: translateY(-50%) translateX(-4px);
}
.dock[data-pos="left"] .dk:hover .dk-tip { transform: translateY(-50%) translateX(0); }
.dock[data-pos="right"] .dk-tip {
  bottom: auto; right: calc(100% + 14px); left: auto; top: 50%;
  transform: translateY(-50%) translateX(4px);
}
.dock[data-pos="right"] .dk:hover .dk-tip { transform: translateY(-50%) translateX(0); }
.dock[data-pos="left"]  .dk-dot { bottom: auto; left: -5px; top: 50%; margin: -2px 0 0; }
.dock[data-pos="right"] .dk-dot { bottom: auto; right: -5px; left: auto; top: 50%; margin: -2px 0 0; }

/* magnification off */
.dock.nomag .dk:hover { transform: none; }
.dock.nomag .dk:hover + .dk,
.dock.nomag .dk:has(+ .dk:hover) { transform: none; }
.dock.nomag .dk:active { transform: scale(.96); }

/* ── auto-hide ──────────────────────────────────────────────────
   Three states, not two. A hard show/hide at a 26px threshold felt
   like a switch being flipped; the dock now leans up to meet you as
   you approach, then commits.

     (none)  parked off-screen
     .hint   a sliver showing, from ~90px away
     .peek   fully out

   It also drops its blur while parked. A backdrop-filter on something
   translated off-screen is pure cost for pixels nobody sees. */
.dock-wrap {
  transition:
    transform 420ms var(--dock-ease, cubic-bezier(.22,.9,.28,1)),
    opacity 300ms var(--ease);
  will-change: transform;
}
.dock-wrap.autohide .dock,
body.has-max .dock-wrap[data-hidemax="1"] .dock {
  transition: backdrop-filter 300ms linear, box-shadow 300ms var(--ease);
}

/* parked */
.dock-wrap.autohide[data-pos="bottom"],
body.has-max .dock-wrap[data-hidemax="1"][data-pos="bottom"] {
  transform: translateY(calc(100% + 16px)) scale(.94);
  opacity: 0;
}
.dock-wrap.autohide[data-pos="left"],
body.has-max .dock-wrap[data-hidemax="1"][data-pos="left"] {
  transform: translateX(calc(-100% - 16px)) scale(.94);
  opacity: 0;
}
.dock-wrap.autohide[data-pos="right"],
body.has-max .dock-wrap[data-hidemax="1"][data-pos="right"] {
  transform: translateX(calc(100% + 16px)) scale(.94);
  opacity: 0;
}
.dock-wrap.autohide .dock,
body.has-max .dock-wrap[data-hidemax="1"] .dock {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* leaning up to meet you */
.dock-wrap.hint[data-pos="bottom"]  { transform: translateY(calc(100% - 13px)) scale(.97); opacity: .6; }
.dock-wrap.hint[data-pos="left"]    { transform: translateX(calc(-100% + 13px)) scale(.97); opacity: .6; }
.dock-wrap.hint[data-pos="right"]   { transform: translateX(calc(100% - 13px)) scale(.97); opacity: .6; }

/* out, with a little overshoot */
.dock-wrap.peek {
  transform: none !important;
  opacity: 1 !important;
  transition:
    transform 480ms cubic-bezier(.18,1.06,.32,1),
    opacity 220ms linear;
}
.dock-wrap.peek .dock {
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)) brightness(var(--g-bright));
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)) brightness(var(--g-bright));
}

/* The icons arrive in sequence rather than all at once.

   Note the :not(.peek) on every selector. Writing `.dock-wrap.peek .dk
   { transform: none }` to undo the entry state would out-specify
   `.dk:hover` (three classes against two) and silently kill dock
   magnification whenever the dock was peeked. So the hidden state is
   scoped to the hidden case only, and a peeked icon simply has no
   transform of its own to fight with. */
.dock-wrap.autohide:not(.peek) .dk,
body.has-max .dock-wrap[data-hidemax="1"]:not(.peek) .dk {
  opacity: 0;
  transform: translateY(12px) scale(.86);
  transition: opacity 240ms var(--ease), transform 380ms cubic-bezier(.18,1.08,.32,1);
}
.dock-wrap[data-pos="left"].autohide:not(.peek) .dk,
body.has-max .dock-wrap[data-hidemax="1"][data-pos="left"]:not(.peek) .dk {
  transform: translateX(-12px) scale(.86);
}
.dock-wrap[data-pos="right"].autohide:not(.peek) .dk,
body.has-max .dock-wrap[data-hidemax="1"][data-pos="right"]:not(.peek) .dk {
  transform: translateX(12px) scale(.86);
}

/* on the way out, each icon follows the one before it */
.dock-wrap.peek .dk {
  transition:
    opacity 240ms var(--ease) calc(var(--i, 0) * 16ms),
    transform 380ms cubic-bezier(.18,1.08,.32,1) calc(var(--i, 0) * 16ms),
    box-shadow 220ms var(--ease);
}
/* ...but a hovered icon reacts immediately, with no inherited delay */
.dock-wrap.peek .dk:hover {
  transition: transform 220ms var(--ease-back), box-shadow 220ms var(--ease);
}

/* the icon and widget layers step aside for a side dock */
.desk-icons, .widgets { transition: inset 300ms var(--ease); }
body[data-dock="left"]  .desk-icons,
body[data-dock="left"]  .widgets { left: calc(var(--dock-h) + 26px); bottom: 14px; }
body[data-dock="right"] .desk-icons,
body[data-dock="right"] .widgets { right: calc(var(--dock-h) + 26px); bottom: 14px; }
body[data-dock="hidden"] .desk-icons,
body[data-dock="hidden"] .widgets { bottom: 14px; }


/* A maximised window fills the screen, so the dock retreats using the
   same three-state motion as auto-hide above. */


/* ── actionable notifications ──────────────────────────────────
   A card that asks you to do something shows the way in, and gets its
   own dismiss so acting and closing never get confused. */
.toast.has-action { cursor: default; padding-right: 34px; }
.toast.has-action:hover {
  box-shadow: var(--g-inset), var(--shadow-deep),
              inset 0 0 0 1px hsl(var(--accent) / .45);
}
.t-act {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: hsl(var(--accent) / 1);
}
.t-act svg { transition: transform 200ms var(--ease); }
.toast.has-action:hover .t-act svg { transform: translateX(3px); }
.t-close {
  position: absolute;
  z-index: 4;
  top: 8px; right: 8px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: var(--g-radius-2xs);
  color: var(--text-3);
  transition: all 150ms linear;
}
.t-close:hover { color: var(--text); background: rgb(var(--edge-hi) / .14); }