/* Floating icon dock.
   Shared by index, store, calculator and inverter. Sits above everything,
   floated bottom-centre. Mark the current page's item aria-current="page". */

.dock {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(11, 29, 58, 0.10);
  box-shadow: 0 10px 34px rgba(11, 29, 58, 0.22), 0 2px 6px rgba(11, 29, 58, 0.10);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  max-width: calc(100vw - 24px);
}

.dock-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 62px;
  height: 52px;
  border-radius: 999px;
  color: #5B6B84;
  transition: background 0.18s ease, color 0.18s ease;
}

.dock-item svg { width: 21px; height: 21px; display: block; }
.dock-item .dock-label {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.02em;
  line-height: 1;
  font-weight: 500;
}

.dock-item:hover { color: #0B1D3A; background: rgba(11, 29, 58, 0.06); }
.dock-item:focus-visible { outline: 2px solid #0E7C4A; outline-offset: 2px; }

.dock-item[aria-current="page"] {
  background: #FFFFFF;
  color: #0B1D3A;
  box-shadow: 0 2px 10px rgba(11, 29, 58, 0.16);
}
.dock-item[aria-current="page"] svg { stroke-width: 2.1; }

/* Keep page content clear of the floating dock */
body { padding-bottom: 84px; }

@media (max-width: 400px) {
  .dock-item { width: 54px; height: 48px; }
  .dock-item .dock-label { font-size: 0.54rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dock-item { transition: none; }
}