/* Studio component: the bar. One part, two forms (DRAFT v0.2, inbox #3).
   Phone: a floating dock above the bottom edge. From 1024 px: a floating rail down the start side.
   Reads tokens only (color-dock-*, elevation-dock, radius-dock, size-dock, shape-dock-indicator); no raw colours.
   Markup:  <nav class="dock" aria-label="…"><span class="dock-name">Name</span>
              <a href="…" aria-current="page"><span class="ico"><svg>…</svg></span><span class="lab">Today</span></a> …
              <span class="dock-foot">…</span></nav>
   A page that has a dock adds class "has-dock" to its scroll container. */

.dock {
  position: fixed; z-index: 20;
  inset-inline: var(--size-dock-gap);
  bottom: calc(var(--size-dock-gap) - 4px + env(safe-area-inset-bottom, 0px));
  height: var(--size-dock);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; gap: 2px;
  padding: 6px;
  border-radius: var(--radius-dock);
  background: var(--color-dock-fill);
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid var(--color-dock-edge);
  box-shadow: var(--elevation-dock), inset 0 1px 0 var(--color-dock-highlight);
}
.dock > a, .dock > button {
  display: grid; justify-items: center; align-content: center; gap: 2px;
  min-height: var(--size-tap); padding: 0; border: 0; background: none; text-decoration: none; cursor: pointer;
  color: var(--color-dock-off-ink); font: 600 11px/1.1 var(--font-family-body); letter-spacing: .01em;
  transition: color var(--motion-duration-press) var(--motion-easing-out);
}
.dock .ico {
  display: grid; place-items: center; width: 48px; height: 30px;
  border-radius: var(--shape-dock-indicator);
  transition: background var(--motion-duration-move) var(--motion-easing-out), color var(--motion-duration-move) var(--motion-easing-out);
}
.dock svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dock > [aria-current="page"] { color: var(--color-dock-on-label); }
.dock > [aria-current="page"] .ico { background: var(--color-dock-on-fill); color: var(--color-dock-on-ink); }
.dock > a:active .ico, .dock > button:active .ico { box-shadow: var(--elevation-pressed); }
.dock > a:focus-visible, .dock > button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 18px; }
.dock-name, .dock-foot { display: none; }
.has-dock { padding-bottom: calc(var(--size-dock) + var(--size-dock-gap) + 20px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 1024px) {
  .dock {
    inset-block: var(--size-dock-gap); inset-inline-start: var(--size-dock-gap); inset-inline-end: auto; bottom: var(--size-dock-gap);
    width: calc(var(--size-rail) - var(--size-dock-gap) - 4px); height: auto;
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 18px 12px 14px; border-radius: calc(var(--radius-dock) - 4px);
  }
  .dock-name { display: block; padding: 4px 14px 22px; font: 600 26px/1 var(--font-family-name); color: var(--color-dock-on-label); }
  .dock > a, .dock > button { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 16px; font-size: 15px; }
  .dock > a:hover:not([aria-current="page"]), .dock > button:hover:not([aria-current="page"]) { background: var(--color-raise); }
  .dock .ico { width: 32px; height: 32px; border-radius: var(--shape-dock-indicator); }
  .dock-foot { display: grid; gap: 8px; margin-top: auto; flex: none; padding: 14px; border-radius: var(--radius-row); background: var(--color-raise); color: var(--color-fg); font: 400 13px/1.4 var(--font-family-body); }
  .dock-foot b { font: 600 14px var(--font-family-body); }
  .has-dock { padding-bottom: 0; padding-inline-start: calc(var(--size-rail) + 24px); }
}
@media (prefers-reduced-motion: reduce) { .dock .ico, .dock > a, .dock > button { transition: none; } }