/*
  @td/desk-ui, shell additions. Everything here is for the pieces the package adds on top of the desktop's own CSS (app.css, desk.css):
  the workspace switcher, a locked sidebar item and its hover line, and the sidebar item hover effect. Same tokens, no new colour.
  A desktop screen that never uses a switcher or a locked item is not touched by the first two blocks.
*/

/* ---------- Workspace switcher (admin only, top of the sidebar), from the approved caller mockup ---------- */
.wsw { position: relative; align-self: stretch; margin-bottom: var(--s2); }
.wsw-btn { display: flex; align-items: center; gap: 12px; width: 100%; height: 56px; padding: 0 var(--s1) 0 var(--s1); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.wsw-btn:hover { background: var(--surface-hover); }
.wsw-btn img { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.wsw-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wsw-k { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-3); font-weight: var(--w-medium); }
.wsw-n { font-size: var(--fs-base); line-height: var(--lh-base); font-weight: var(--w-bold); }
.wsw-btn .ico { color: var(--text-3); }
.wsw-menu { margin-top: var(--s-half); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-1); padding: var(--s-half); display: flex; flex-direction: column; gap: 0; }
.wsw-o { display: flex; align-items: center; gap: 12px; padding: var(--s1); min-height: 56px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; }
.wsw-o:hover { background: var(--surface-hover); }
.wsw-o.on { background: var(--surface-selected); }
.wsw-o img, .wsw-o .wsw-ic, .wsw-btn .wsw-ic { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.wsw-o .wsw-ic, .wsw-btn .wsw-ic { background: var(--ink); color: #fff; display: grid; place-items: center; }
.wsw-btn .wsw-ic { width: 40px; height: 40px; }
.wsw-o .wsw-ic .ico, .wsw-btn .wsw-ic .ico { width: 16px; height: 16px; color: #fff; }
.wsw-btn .wsw-ic .ico { width: 20px; height: 20px; }
.wsw-o span.tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wsw-o b { font-weight: var(--w-semibold); }
.wsw-o small { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); }
.wsw-o .ico.ck { color: var(--ink); }
/* collapsed rail: the switcher is just its round mark, and the menu opens beside the rail */
.rail:not(.open) .wsw { align-self: center; width: 48px; }
.rail:not(.open) .wsw-btn { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; }
.rail:not(.open) .wsw-t, .rail:not(.open) .wsw-btn > .ico { display: none; }
.rail:not(.open) .wsw-menu { position: absolute; left: calc(100% + 8px); top: 0; width: 240px; z-index: 60; box-shadow: var(--sh-2); }

/* ---------- A locked sidebar item (greyed, no link) and the hover line that says why ---------- */
.rail.open .nav.locked { color: var(--text-3); cursor: default; }
.rail.open .nav.locked:hover { background: transparent; color: var(--text-3); }
.nav .lk { width: 16px; height: 16px; margin-left: auto; flex: none; }
.lockhint { display: none; position: absolute; left: 12px; top: calc(100% + 4px); z-index: 60; background: var(--ink); color: #fff; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--w-medium); padding: var(--s1) var(--s2); border-radius: var(--r-sm); white-space: nowrap; box-shadow: var(--sh-2); pointer-events: none; }
.lockhint::before { content: ""; position: absolute; left: 16px; top: -4px; width: 8px; height: 8px; background: var(--ink); transform: rotate(45deg); }
.nav.locked:hover .lockhint, .nav.locked:focus-visible .lockhint, .lockhint.show { display: block; }
/* a small marker at the right end of an open item (the caller's "2 of 5" progress) */
.rail.open .nav .prog { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-half); height: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface-hover); color: var(--text-2); font-size: var(--fs-sm); line-height: 1; font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; flex: none; }
.rail.open .nav.active .prog { background: var(--ink); color: #fff; }
.rail.open .nav .prog .ico { width: 12px; height: 12px; }

/* ---------- Sidebar item hover (Jack, 14 Nov 2026) ----------
   On hover an item scales to 1.03, its background goes one step darker (surface-hover, its old hover, to surface-selected) and its icon nudges 2px to the right,
   150ms ease-out. WITHOUT hover nothing moves: every transform here is inside :hover. The active orange pill keeps its look and gets the same scale and nudge.
   Reduced motion removes the scale, the nudge and the transition; the colour still changes, at once. A locked item does none of it (it does nothing). */
.rail .nav { transition: transform 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out; }
.rail .nav .ico { transition: transform 150ms ease-out; }
.rail .nav:hover { transform: scale(1.03); background: var(--surface-selected); }
.rail .nav:hover .ico { transform: translateX(2px); }
.rail .nav.active:hover { background: var(--orange); color: var(--on-orange); }
.rail .nav.locked:hover, .rail.open .nav.locked:hover { transform: none; }
.rail .nav.locked:hover .ico { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rail .nav, .rail .nav .ico { transition: none; }
  .rail .nav:hover { transform: none; }
  .rail .nav:hover .ico { transform: none; }
}