/* The dock: icons alone. A word unfolds beside the icon under the pointer, and the scene you just entered names itself once before letting go. Touch and small screens keep their labels (see everside-os-motion.css). */
@media (hover: hover) and (min-width: 701px) {
  #dock span, #dock span.on { gap: 0; width: auto; min-width: 0; flex: 0 0 auto; padding: 0 11px; }
  #dock { gap: 6px; padding: 8px 10px; }
  #dock span b {
    display: inline-block; max-width: 0; opacity: 0; margin-left: 0; overflow: hidden; white-space: nowrap; vertical-align: middle;
    font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone);
    transform: translateX(-4px);
    transition: max-width .5s var(--ease), opacity .38s var(--ease) .04s, margin-left .5s var(--ease), transform .5s var(--ease);
  }
  #dock span.on b { max-width: 0; opacity: 0; margin-left: 0; }
  #dock span:hover b, #dock span:focus-visible b, #dock span.peek b, #dock span.on:hover b, #dock span.on.peek b { max-width: 150px; opacity: 1; margin-left: 9px; transform: none; }
  #dock span.on:not(:hover):not(.peek) { color: var(--bone); }
  #dock span .library-dock-new { right: 4px; }
}
@media (prefers-reduced-motion: reduce) { #dock span b { transition: none; } }

/* The fold, restated so it outranks the spatial sheet's always-on labels: a word lives beside an icon only under the
   pointer, on focus, or for the moment a scene names itself. */
@media (hover: hover) and (min-width: 701px) {
  #dock > span:not(.os-display-launch), #dock > span.on:not(.os-display-launch) { flex: 0 0 auto; width: auto; min-width: 0; padding: 0 11px; gap: 0; justify-content: center; }
  #dock > span:not(:hover):not(.peek):not(:focus-visible) > b { max-width: 0; opacity: 0; margin: 0; overflow: hidden; transform: translateX(-4px); transition: max-width .5s var(--ease), opacity .38s var(--ease) .04s, margin-left .5s var(--ease), transform .5s var(--ease); }
  #dock > span:is(:hover, .peek, :focus-visible):not(.os-display-launch) > b { max-width: 150px; opacity: 1; margin-left: 9px; overflow: hidden; transform: none; transition: max-width .5s var(--ease), opacity .38s var(--ease) .04s, margin-left .5s var(--ease), transform .5s var(--ease); }
}