/* Glass dock (left edge) and its preview card. Theme follows the nearest [data-theme]. */

.dock {
  --tile-bg: color-mix(in srgb, var(--surface-raised) 55%, transparent);
  --tile-border: color-mix(in srgb, var(--glass-highlight) 70%, transparent);
  position: fixed;
  left: var(--space-5);
  top: 50%;
  z-index: var(--z-dock);
  transform: translateY(-50%);
  padding: 8px;
  border-radius: var(--radius-xl);
  transition: background var(--dur-slow) var(--ease-standard), border-color var(--dur-slow) var(--ease-standard);
}
[data-theme='dark'] .dock,
.dock[data-theme='dark'] {
  --tile-bg: rgb(255 255 255 / 0.05);
  --tile-border: rgb(255 255 255 / 0.08);
}

.dock__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dock__tile {
  --s: 1;
  position: relative;
  display: grid;
  place-items: center;
  width: calc(44px * var(--s));
  height: calc(44px * var(--s));
  border: 1px solid var(--tile-border);
  border-radius: calc(12px * var(--s));
  background: var(--tile-bg);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  color: var(--glyph);
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.dock__tile .glyph {
  width: calc(22px * var(--s));
  height: calc(22px * var(--s));
  opacity: 0.7;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.dock__tile:hover,
.dock__tile:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, var(--tile-bg));
}
.dock__tile:hover .glyph,
.dock__tile:focus-visible .glyph {
  opacity: 1;
}
/* The project on screen: a gold rim, a warm fill and a glow, its glyph at full strength. */
.dock__tile[aria-current] {
  border-color: color-mix(in srgb, var(--accent) 85%, transparent);
  background: color-mix(in srgb, var(--accent) 26%, var(--tile-bg));
  color: var(--accent-strong);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent);
}
.dock__tile[aria-current] .glyph {
  opacity: 1;
}
/* Active project: a small light to the left of its tile, like a running app. */
.dock__tile[aria-current]::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--spark);
  box-shadow: 0 0 8px var(--spark);
  transform: translateY(-50%);
}

/* ── Preview card ── */

.dock-preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-dock);
  width: 300px;
  padding: 8px;
  border-radius: var(--radius-lg);
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  scale: 0.96;
  transform-origin: left center;
  transition: opacity var(--dur-base) var(--ease-out-expo), scale var(--dur-base) var(--ease-out-expo);
}
.dock-preview.is-visible {
  opacity: 1;
  scale: 1;
}
.dock-preview__media {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.dock-preview__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dock-preview__text {
  padding: 12px 8px 6px;
}
.dock-preview__meta {
  color: var(--ink-muted);
}
.dock-preview__name {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--tracking-title);
}
.dock-preview__sub {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  color: var(--ink-muted);
}

/* Phones: two columns in the top-left corner, below the header and level with the slide counter, so the
   project's title and card keep the full width below. The selected tile's glow marks it; no dot. */
@media (max-width: 720px) {
  .dock {
    left: var(--space-3);
    top: 72px;
    transform: none;
    padding: 4px;
    border-radius: var(--radius-md);
  }
  .dock__list {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 4px;
  }
  .dock__tile {
    --s: 0.682; /* 30 px tiles */
  }
  .dock__tile[aria-current]::before {
    display: none;
  }
}
/* No hover on touch screens: a tap goes straight to the project, without the preview card. */
@media (hover: none) {
  .dock-preview {
    display: none;
  }
}