/* ==========================================================================
   shell.css — menu bar, desktop icons, Find, show-all-windows,
   application switcher, notifications.
   ========================================================================== */

/* ---------------- Menu bar ---------------- */
#menubar {
  position: absolute; top: 0; left: 0; right: 0; height: var(--menubar-h);
  display: flex; align-items: stretch;
  font-size: 12px;
  background: #113ac5;
  border-bottom: 1px solid #ffffff;
  color: #ffffff;
}
.mb-left, .mb-right { display: flex; align-items: stretch; }
.mb-right { margin-left: auto; padding-right: 4px; }
.mb-menus { display: flex; align-items: stretch; }

.mb-item {
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px; border: 0; background: none;
  font-size: 12px; line-height: 1; white-space: nowrap;
  color: inherit;
}
.mb-item:hover, .mb-item.open { background: #ffffff; color: #113ac5; }
.mb-item:hover svg, .mb-item.open svg { fill: #113ac5; }
/* The front application's name is set in bold. */
.mb-item.bold { font-weight: bold; }
.mb-brand { padding: 0 10px; }
.mb-brand .brand-mark { width: 26px; }
/* The mark is white, so on the inverted (white) hover state it has to swap
   too — same two-colour exchange filter the rest of the interface uses. */
.mb-brand:hover .brand-mark, .mb-brand.open .brand-mark { filter: url(#swap); }

.mb-extra {
  display: flex; align-items: center; padding: 0 6px;
  border: 0; background: none; color: inherit;
}
.mb-extra:hover, .mb-extra.open { background: #ffffff; }
.mb-extra svg { width: 13px; height: 13px; fill: #ffffff; }
.mb-extra:hover svg, .mb-extra.open svg { fill: #113ac5; }
#mb-clock { font-size: 12px; padding: 0 8px; }
.mb-spotlight svg { width: 13px; height: 13px; }

/* ---------------- Desktop icons ---------------- */
#desktop-icons { position: absolute; inset: 0; padding: 8px 10px; }

.desk-icon {
  position: absolute;
  width: 84px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 3px 2px;
  text-align: center;
}
.desk-icon .ico { width: 32px; height: 32px; }
.desk-icon .ico svg, .desk-icon .ico img { width: 100%; height: 100%; display: block; }
.desk-icon .label {
  font-size: 11px;
  background: #113ac5;
  border: 1px solid transparent;
  padding: 0 3px;
  max-width: 82px; line-height: 1.2;
  word-break: break-word;
}
/* Selection is a straight video invert. */
.desk-icon.sel .ico { filter: url(#swap); }
.desk-icon.sel .label { background: #ffffff; color: #113ac5; }

.marquee {
  position: absolute; z-index: 50;
  border: 1px dotted #ffffff;
  background: transparent;
  pointer-events: none;
}

/* ---------------- Find ---------------- */
#spotlight-panel { position: absolute; top: var(--menubar-h); right: 4px; width: 320px; }
.spot-field-wrap {
  display: flex; align-items: center; gap: 6px;
  background: #113ac5;
  border: 1px solid #ffffff;
  padding: 5px 7px;
  box-shadow: var(--drop);
}
.spot-field-wrap input { flex: 1; }
.spot-results {
  margin-top: 3px;
  background: #113ac5;
  border: 1px solid #ffffff;
  box-shadow: var(--drop);
  max-height: 60vh; overflow: auto;
  padding: 2px 0;
  font-size: 11px;
}
.spot-cat {
  font-size: 10px; padding: 2px 8px;
  border-bottom: 1px solid #ffffff;
  background-image: var(--d25); background-size: 4px 4px; image-rendering: pixelated;
}
.spot-row { display: flex; align-items: center; gap: 6px; padding: 1px 8px; height: 20px; }
.spot-row .ico { width: 16px; height: 16px; flex: none; }
.spot-row .ico svg, .spot-row .ico img { width: 100%; height: 100%; }
.spot-row.sel { background: #ffffff; color: #113ac5; }
.spot-row.sel .ico svg { filter: url(#swap); }
.spot-row .sub { margin-left: auto; font-size: 10px; }
.spot-empty { padding: 12px; text-align: center; font-size: 11px; }

/* ---------------- Exposé ---------------- */
#expose {
  position: absolute; inset: 0;
  background-image: var(--d50);
  background-size: 2px 2px;
  image-rendering: pixelated;
}
.exp-thumb { position: absolute; border: 1px solid #ffffff; background: #113ac5; }
.exp-thumb:hover { box-shadow: 0 0 0 2px #ffffff; }
.exp-thumb .exp-cap { position: absolute; left: 0; right: 0; bottom: 0; background: #ffffff; color: #113ac5; font-size: 10px; padding: 2px 4px; text-align: center; }

/* ---------------- Application switcher ---------------- */
#switcher {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%);
  display: flex; gap: 8px; padding: 12px 14px;
  background: #113ac5;
  border: 2px solid #ffffff;
  box-shadow: var(--drop);
}
.sw-item { width: 44px; height: 44px; padding: 3px; position: relative; border: 1px solid transparent; }
.sw-item svg, .sw-item img { width: 100%; height: 100%; }
.sw-item.sel { border-color: #ffffff; background: #ffffff; }
.sw-item.sel svg { filter: url(#swap); }
.sw-name {
  position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%);
  font-size: 11px; white-space: nowrap; background: #113ac5; padding: 0 3px;
  display: none;
}
.sw-item.sel .sw-name { display: block; }

/* ---------------- Notifications ---------------- */
#notifications {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  padding: calc(var(--menubar-h) + 8px) 10px 0 0;
}
.growl {
  width: 260px;
  background: #113ac5;
  color: #ffffff;
  border: 1px solid #ffffff;
  box-shadow: var(--drop);
  padding: 8px 10px;
  display: flex; gap: 9px; align-items: flex-start;
}
.growl.out { opacity: 0; transition: opacity .18s steps(3); }
.growl .ico { width: 28px; height: 28px; flex: none; }
.growl .ico svg, .growl .ico img { width: 100%; height: 100%; }
.growl .g-title { font-size: 11px; font-weight: bold; margin-bottom: 2px; }
.growl .g-text { font-size: 10px; line-height: 1.35; }

/* ---------------- Drag ---------------- */
/* Dragging showed a dotted outline of the item, not a translucent ghost. */
.drag-ghost {
  position: absolute; pointer-events: none; z-index: 900;
  width: 32px; height: 32px;
  transform: translate(-50%,-50%);
  opacity: .55;
}
.drag-ghost svg, .drag-ghost img { width: 100%; height: 100%; }
.drag-count {
  position: absolute; right: -6px; top: -6px;
  background: #113ac5; color: #ffffff; border: 1px solid #ffffff;
  font-size: 9px; padding: 0 3px;
}
.drop-target { outline: 2px solid #ffffff; outline-offset: -2px; }