/* ============================================================
   Таб-бар — «жидкая» капсула Meniscus
   Based on MENISCUS liquid bottom navigation,
   https://github.com/hasib41/meniscus-liquid-nav
   Copyright (c) 2026 Hasib, MIT License (full text in js/dock.js).
   Layers, bottom-up: .dock__cast (ground shadow) → .dock__skin (one SVG
   path with a parametric trough) → .dock__bead (accent bead) → .dock__tabs.
   Geometry custom properties are written by js/dock.js.
   ============================================================ */

.dock {
  --bar:      var(--panel);
  --bar-hi:   var(--panel);
  --bar-lo:   var(--panel-soft);
  --rim-hi:   #dba9b9;
  --rim-lo:   #edcbd5;
  --icon-off: var(--text-2);
  --icon-on:  #ffffff;
  --glow-rgb: 181 51 90;
  --glow:     rgb(var(--glow-rgb));
  --dock-shadow: rgba(var(--shadow-rgb), .16);
  --bead-seat: rgba(120, 40, 68, .22);
  --dock-r:   18px;
  --bead-d:   56px;
  --bead-cy:  0px;
  --rise:     36px;

  position: fixed; z-index: 30;
  left: 0; right: 0;
  bottom: calc(var(--safe-b) + 10px);
  width: min(460px, calc(100% - 24px));
  height: 72px;
  margin: 0 auto;
  touch-action: pan-y;                /* vertical scroll stays the page's */
  -webkit-tap-highlight-color: transparent;
}
:root[data-theme="dark"] .dock {
  --bar-hi: #30232a;
  --bar-lo: #21171c;
  --rim-hi: #a9788a;
  --rim-lo: #7b5663;
  --icon-on: var(--text);
  --dock-shadow: rgba(0, 0, 0, .38);
  --bead-seat: rgba(0, 0, 0, .45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .dock {
    --bar-hi: #30232a;
    --bar-lo: #21171c;
    --rim-hi: #a9788a;
    --rim-lo: #7b5663;
    --icon-on: var(--text);
    --dock-shadow: rgba(0, 0, 0, .38);
    --bead-seat: rgba(0, 0, 0, .45);
  }
}

/* A soft ground shadow, entirely under the bar's lower half. */
.dock__cast {
  position: absolute;
  inset: 46% 7% 6% 7%;
  border-radius: 999px;
  background: var(--bar);
  box-shadow:
    0 10px 22px -8px var(--dock-shadow),
    0 32px 56px -20px var(--dock-shadow);
}
.dock__skin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* no drop-shadow filter: the path changes every frame and iOS Safari re-blurred it
     each time, which made the dock stutter; .dock__cast gives the ground shadow */
}
.dock__fill {
  fill: url(#mnPlate);
  stroke: url(#mnRim);
  stroke-width: 1;
}
.dock__plate-hi { stop-color: var(--bar-hi); }
.dock__plate-lo { stop-color: var(--bar-lo); }
.dock__rim-hi { stop-color: var(--rim-hi); stop-opacity: .85; }
.dock__rim-lo { stop-color: var(--rim-lo); stop-opacity: .14; }

.dock__bead {
  position: absolute;
  top: var(--bead-cy);
  left: 0;
  width: var(--bead-d);
  height: var(--bead-d);
  margin: calc(var(--bead-d) / -2) 0 0 calc(var(--bead-d) / -2);
  border-radius: 50%;
  --glow: rgb(var(--glow-rgb));   /* re-resolve here: dock.js sets --glow-rgb on the bead */
  background:
    linear-gradient(168deg, color-mix(in srgb, var(--glow) 90%, #fff), var(--glow) 62%);
  box-shadow:
    0 0 0 1px rgb(var(--glow-rgb) / .5),
    0 0 26px 2px rgb(var(--glow-rgb) / .32),
    0 10px 18px -7px var(--bead-seat),
    inset 0 0 0 1px rgba(255, 255, 255, .42),
    inset 0 -3px 6px -3px var(--bead-seat);
  will-change: transform;
  pointer-events: none;
}
.dock:not(.is-ready) .dock__bead { opacity: 0; }

.dock__tabs {
  position: absolute;
  inset: 0;
  display: flex;
  padding-inline: clamp(26px, 10.5%, 54px);
}

.tab {
  position: relative;
  flex: 1;
  min-width: 0;
  display: block;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 14px;
  --t: 0;                            /* 0 = at rest · 1 = inside the bead */
  --acc: var(--acc-light);
}
:root[data-theme="dark"] .tab { --acc: var(--acc-dark); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .tab { --acc: var(--acc-dark); }
}
.tab:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: -3px;
}
.tab-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  /* ink while it sits on the bar, ink-on-accent once it is in the bead */
  color: color-mix(in oklab, var(--icon-off) calc((1 - var(--t)) * 100%), var(--icon-on));
  transform: translate(-50%, -50%) translateY(calc(var(--t) * var(--rise) * -1));
  will-change: transform;
}
.tab-label {
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: 12%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  color: var(--acc);
  opacity: 0;
  transform: translateY(calc((1 - var(--t)) * 7px));
  pointer-events: none;
  white-space: nowrap;
}
/* the label belongs to the chosen tab; while dragging every label previews */
.tab.active .tab-label,
.dock.is-dragging .tab-label { opacity: var(--t); }

@media (max-width: 400px) {
  .tab-icon { width: 22px; height: 22px; }
}