/* ═══════════════════════════════════════════════════════════════════════
   Dock.css — dock, hover magnification, stacked tooltips.
   Nothing in here is clickable. Cursor stays an arrow throughout.
   ═══════════════════════════════════════════════════════════════════════ */

.Dock{
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: var(--z-dock);
}

.Dock-list{
  display: flex;
  align-items: flex-end;
  /* No gap. The icon PNGs carry ~10% transparent padding on every side, so
     even edge-to-edge the squircles sit ~11px apart — which is what a real
     Dock looks like. The old 4px made it ~15px, visibly loose next to a Mac.
     DOCK_SIGMA in Main.js is tuned to this pitch (56 + 0). */
  gap: 0;
  /* Equal inset all round. Magnified icons deliberately break the top edge —
     nothing clips them, since neither .Dock nor .Dock-list hides overflow.

     The horizontal padding grows with --dock-spread (written by Main.js) so
     the background widens as icons push apart, exactly like the real dock.
     This works ONLY because .Dock is centre-anchored (left:50% +
     translateX(-50%)): adding equal padding to both sides grows the box
     symmetrically and leaves the icons' base positions untouched. Anchor the
     dock to a side instead and every icon would slide as you hover. */
  padding: 9px calc(9px + var(--dock-spread, 0px));
  border-radius: 20px;
  background: rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
          backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: 0 8px 26px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.3);
}

/* Default: decorative. No page behind it, so no pointer cursor — an arrow is
   the honest signal that there is nothing to click. */
.Dock-item{
  position: relative;
  cursor: default;
}

/* Items that DO have a page. Add this class and wrap the icon in
   <a class="Dock-link"> when a product's page goes live. */
.Dock-item--live{ cursor: pointer; }

.Dock-link{
  display: block;
  border-radius: 12px;
  outline-offset: 4px;
}
.Dock-link:focus-visible{ outline: 2px solid rgba(255,255,255,.9); }

/* macOS's running-app indicator. Sits inside the dock's 9px bottom padding. */
.Dock-running{
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  box-shadow: 0 0 0 .5px rgba(255,255,255,.35);
  pointer-events: none;
}

.Dock-item img{
  width: 56px; height: 56px;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.18));
}

.Dock-divider{
  width: 1px;
  height: 50px;
  margin: 0 5px 3px;
  align-self: flex-end;
  background: rgba(0,0,0,.16);
  box-shadow: 1px 0 0 rgba(255,255,255,.4);
  border-radius: 1px;
}

/* ── Magnification ──────────────────────────────────────────────────────
   Driven entirely from Scripts/Main.js — every icon's scale is a continuous
   function of its distance from the cursor, so the whole row bows in a smooth
   arc rather than snapping between fixed steps. There are deliberately NO
   :hover rules here: CSS can only express discrete tiers, which is exactly
   what made the old version feel abrupt.

   ⚠️ Two transforms, on two different elements, for a reason:
   • The <li> gets translateX only — it slides sideways so icons push apart
     instead of overlapping. Translating the <li> is fine (its tooltips should
     travel with it); SCALING it would blow up the tooltips too.
   • .Dock-iconWrap gets scale only, from `transform-origin: bottom center`,
     which is what keeps every icon's bottom edge welded to the same baseline
     however large it grows. Do not add translateY here — lifting the icons is
     what made it feel un-Mac-like.

   No CSS transition: Main.js eases the values itself every frame, so a
   transition on top would fight it and add lag.
   ───────────────────────────────────────────────────────────────────── */
.Dock-iconWrap{
  display: block;
  transform-origin: bottom center;
  will-change: transform;
}
.Dock-item{ will-change: transform; }

/* ── Tooltips ───────────────────────────────────────────────────────────
   Both pills anchor to bottom:100% and are separated purely by their
   margin-bottom values — the larger one floats above the smaller.

   ⚠️ They use translateX(-50%), so an item near the dock edge would
   overflow. The four tooltipped apps sit at positions 2–5 of 10, so it
   can't happen here — but bear it in mind before adding one to Trash.
   ───────────────────────────────────────────────────────────────────── */
.Tip{
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .12s ease, transform .12s ease;
  z-index: var(--z-tooltip);
  color: #1d1d1f;
  font-family: var(--font);
}

/* Lower pill: the app name.
   ⚠️ The margins clear a FULLY magnified icon. The hovered icon is always at
   peak scale, and at 1.5× a 56px icon grows 28px above the <li>'s own top
   edge — so 14px of clearance would put the pill straight through it. The
   38px delta between the two pills is the name pill's height plus its gap;
   keep that constant if you change either number. */
.Tip--name{
  margin-bottom: 42px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  background: rgba(246,246,246,.8);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
          backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

/* Upper pill: "Coming Soon", or the platform marks for myPod */
.Tip--upper{
  margin-bottom: 80px;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(0,0,0,.62);
  background: rgba(246,246,246,.72);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
          backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 3px 10px rgba(0,0,0,.14);
}

/* myPod's upper pill. Rendered as spans with pointer-events:none — there's
   nothing to download yet, and a hover-only click target would need a
   transparent bridge across the gap to stay reachable. */
.Tip--platforms{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 5px 12px;
}
.Tip-platform{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(0,0,0,.68);
}
.Tip-platformIcon{
  width: 11px; height: 11px;
  color: rgba(0,0,0,.68);
}

/* :focus-within so keyboard users can reach the tooltips too. */
.Dock-item[data-tip]:hover .Tip,
.Dock-item[data-tip]:focus-within .Tip{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}