/* ---- dock ---- */
  .dock{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:90;
    display:flex;align-items:flex-end;gap:10px;padding:9px 12px;
    background:rgba(20,26,40,.5);backdrop-filter:blur(22px) saturate(150%);
    border:1px solid rgba(255,255,255,.1);border-radius:20px;box-shadow:var(--shadow)}
  .dock .app{position:relative;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
    font-size:26px;transition:transform .16s cubic-bezier(.2,.7,.3,1);
    background:none;border:none;padding:0}
  .dock .app .dico{width:50px;height:50px;display:block;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
  /* 1.18 and -12px are the values this dock shipped with and they read correctly; the neighbours
     stepping aside below are what the bigger 1.34 was compensating for. */
  .dock .app:hover{transform:translateY(-12px) scale(1.18)}
  .dock .app .tip{position:absolute;top:-34px;left:50%;transform:translateX(-50%);
    background:rgba(10,14,22,.95);border:1px solid var(--edge);color:var(--ink);
    font-size:11px;padding:4px 9px;border-radius:6px;white-space:nowrap;opacity:0;
    pointer-events:none;transition:opacity .12s;font-family:var(--sans)}
  .dock .app:hover .tip{opacity:1}
  .dock .app .run{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
    width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:0}
  .dock .app.running .run{opacity:1}
  .dock .sep{width:1px;height:36px;background:rgba(255,255,255,.12);margin:0 3px;align-self:center}

  /* ---- dock magnify ----
     A real dock MAKES ROOM: the hovered icon grows and its neighbours step aside. The version before
     this did that with `margin:0 8px` on hover, which was not the bug it looked like — it was the
     displacement. Removing it left nothing to part the row, so the growth had to come from scale
     alone (1.34, a 50px icon at 67px) and every neighbour swelled to disguise the crowding. It read
     as a bulge rather than a dock.

     So: the proven scale is back, and the parting is done with translateX instead of margin.
     Transforms paint outside layout, so the row keeps its width and every icon keeps its LAID-OUT
     centre — a growing margin re-flowed the row and, because .dock is centred with translateX(-50%),
     shifted every other icon the instant the pointer arrived.

     Only the hovered icon scales. Neighbours move and do not grow: two things changing size at once
     is what made the cluster feel mushy. */
  .dock .app{transform-origin:bottom center}
  /* `+` cannot look left, so left-hand neighbours are named with :has(). The .sep deliberately breaks
     the chain — Settings/Launchpad are a separate group and should not shift when Exploder is
     hovered, exactly as a real dock separator behaves. */
  .dock .app:hover + .app{transform:translateX(7px)}
  .dock .app:has(+ .app:hover){transform:translateX(-7px)}
  .dock .app:hover + .app + .app{transform:translateX(2.5px)}
  .dock .app:has(+ .app + .app:hover){transform:translateX(-2.5px)}
  /* !important because the :has() falloff selectors outrank any body.reduce-motion descendant
     selector on class count. Movement stops; the cue survives as a static plate behind the icon. */
  body.reduce-motion .dock .app{transition:none!important;transform:none!important}
  body.reduce-motion .dock .app:hover{background:rgba(255,255,255,.12)}