/* desk.css — command desk (≥1024px, fine pointer). Kestrel-derived window
   manager chrome (commit 45678b9, MIT). Loaded only on the desk mount path
   (main.js injects it; field mode never loads this sheet). */

body[data-mode="desk"] { overflow: hidden; }

/* ── top bar ───────────────────────────────────────────────────── */
.desk-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 32px;
  z-index: var(--z-dock);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--sp-4);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  border-bottom: var(--border-w) solid var(--accent-a30);
  font-size: var(--fs-xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.desk-topbar .cluster { display: flex; gap: var(--sp-4); align-items: center; }
.desk-topbar .crown-mark { color: var(--gold); font-weight: 700; }
.desk-topbar .pill {
  padding: 2px var(--sp-2);
  border: var(--border-w) solid var(--accent-a45); color: var(--accent);
  background: none; cursor: pointer;
}
.desk-topbar .pill[aria-pressed="true"] {
  background: var(--accent-a14); color: var(--accent-hot);
}
.conn-live { color: var(--green); }
.conn-reconnecting { color: var(--accent-hot); }
.conn-offline { color: var(--red); }

/* ── workspace ─────────────────────────────────────────────────── */
.desk-workspace {
  position: absolute; inset: 32px 64px 30px 0;
  z-index: 1; overflow: hidden;
}

/* ── window (Kestrel .win) ─────────────────────────────────────── */
.win {
  position: absolute;
  border: var(--border-w) solid var(--border);
  background: linear-gradient(180deg, var(--win-top), var(--win-bot));
  box-shadow: 0 18px 50px var(--shadow-60),
              0 0 0 1px var(--accent-a05) inset;
  display: flex; flex-direction: column;
  min-width: 280px; min-height: 180px;
  z-index: var(--z-win);
}
.win.focused {
  box-shadow: 0 22px 60px var(--shadow-70),
              0 0 0 1px var(--accent-a45) inset,
              0 0 22px var(--glow-accent);
  border-color: var(--accent-a45);
}
.win .corner {
  position: absolute; width: 12px; height: 12px;
  border: var(--border-w) solid var(--gold); pointer-events: none;
}
.win .corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.win .corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.win .corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.win .corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.win-title {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-1) var(--sp-3);
  background: linear-gradient(90deg, var(--accent-a14), var(--accent-a05));
  border-bottom: var(--border-w) solid var(--accent-a25);
  cursor: grab; user-select: none;
  font-size: var(--fs-xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.win-title:active { cursor: grabbing; }
.win-title .lbl { color: var(--gold); display: flex; gap: var(--sp-2); }
.win-title .ctrls { display: flex; gap: var(--sp-1); }
.win-title .winbtn {
  width: 18px; height: 18px;
  border: var(--border-w) solid var(--ink-a40); background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); color: var(--ink-dim); cursor: pointer;
  padding: 0; line-height: 1;
}
.win-title .winbtn:hover,
.win-title .winbtn:focus-visible { border-color: var(--accent); color: var(--accent); }
.win-title .winbtn.close:hover { border-color: var(--red); color: var(--red); }

.win-body { flex: 1; overflow: auto; position: relative; padding: var(--sp-3); }
.win.minimised .win-body,
.win.minimised .win-resize { display: none; }
.win.minimised { min-height: 0; }

.win-resize {
  position: absolute; width: 14px; height: 14px; right: 0; bottom: 0;
  cursor: se-resize;
  background: linear-gradient(135deg, transparent 50%, var(--accent-a45) 50%);
}

/* ── dock (right) ─────────────────────────────────────────────── */
.desk-dock {
  position: fixed; top: 32px; right: 0; bottom: 30px; width: 64px;
  z-index: var(--z-dock);
  display: flex; flex-direction: column; gap: var(--sp-2);
  align-items: center; padding: var(--sp-3) 0;
  background: var(--bg-panel);
  border-inline-start: var(--border-w) solid var(--border);
}
.dock-btn {
  width: 44px; height: 44px;
  border: var(--border-w) solid var(--border); background: transparent;
  color: var(--ink-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xl);
}
.dock-btn:hover, .dock-btn:focus-visible {
  border-color: var(--accent); color: var(--accent);
}
.dock-btn svg { width: 22px; height: 22px; }

/* ── taskbar (bottom) ─────────────────────────────────────────── */
.desk-taskbar {
  position: fixed; bottom: 0; left: 0; right: 0; height: 30px;
  z-index: var(--z-dock);
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-3);
  background: linear-gradient(0deg, var(--bg) 0%, var(--bg-2) 100%);
  border-top: var(--border-w) solid var(--accent-a25);
  font-size: var(--fs-xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.desk-taskbar .task-item {
  padding: var(--sp-1) var(--sp-2);
  border: var(--border-w) solid var(--border); background: var(--bg-panel);
  color: var(--ink-dim); cursor: pointer;
}
.desk-taskbar .task-item:hover,
.desk-taskbar .task-item.active {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-a08);
}
.desk-taskbar .ticker {
  flex: 1; overflow: hidden; white-space: nowrap; color: var(--ink-dim);
}
.desk-taskbar .utc-clock { color: var(--ink-dim); }

/* ── desk modal ───────────────────────────────────────────────── */
.modal-scrim {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--scrim);
  display: flex; align-items: center; justify-content: center;
}
.modal {
  width: min(560px, 92vw); max-height: 86vh; overflow: auto;
  border: var(--border-w) solid var(--accent-a45);
  background: linear-gradient(180deg, var(--win-top), var(--win-bot));
  box-shadow: 0 22px 60px var(--shadow-70);
  padding: var(--sp-4);
}
.modal.danger { border-color: var(--red); }
.modal.danger .modal-heading { color: var(--red); }
.modal-heading {
  color: var(--gold-hot); font-size: var(--fs-md);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}