/* The liquid bottom navigation.
 *
 * From meniscus-liquid-nav (MIT, © 2026 Hasib), adapted to this site: its
 * palette instead of the original's dark plate and lime bead, five
 * destinations instead of the demo's five panels, and the labels come from the
 * site's own translations rather than being written into the markup.
 *
 * The shape is drawn by js/dock.js — the bar is one SVG path whose socket is
 * computed, so the bead sits in a real dish rather than on top of a notch. The
 * CSS holds only the palette and the parts that do not move.
 */

/* The German course has its own bar; this one steps out of the way rather
   than being re-skinned, so the two never look like the same object. */
.dock.is-hidden-german { display: none; }

.dock {
  /* The bar follows the page: a white plate in the light theme, the
     original's obsidian one in the dark. Written light-first with dark as
     overrides, the same three-state pattern app.css uses, so a choice made
     in the profile beats the device in both directions.
     The plate is not a free choice — it is what the five tab accents are
     measured against. On the obsidian one they are the original's own
     values with the original's own contrast; on white the same lime would
     be 1.3:1, so the light theme darkens the label (and only the label)
     enough to read. */
  /* Mixed from the page's own ground rather than picked: a pure white bar
     on a lavender page reads as a separate object that wandered in. Taking
     --page-2 and lifting it toward white keeps the bar in the page's colour
     family while still leaving it a raised plate — and if the ground is ever
     retuned in app.css, the bar follows it without being touched. */
  --bar: var(--page-2);         /* flat fallback: the no-JS bar */
  --bar-hi: color-mix(in oklab, var(--page-2) 40%, #ffffff);
  --bar-lo: var(--page-2);
  --icon-off: #5c6b81;          /* inactive icon — 4.6:1 against the bottom
                                   of the plate, its darkest part */
  --icon-on: #1a1420;           /* active icon, on the bright bead — 5.7:1
                                   at its worst against the five accents */
  --rim-hi: #cbd5e1; --rim-hi-a: .95;
  --rim-lo: #e2e8f0; --rim-lo-a: .7;
  --plate-shadow: drop-shadow(0 -3px 12px rgba(79, 70, 229, .16))
                  drop-shadow(0 -1px 2px rgba(30, 41, 59, .06));
  --glow-rgb: 201 242 74;       /* until js/dock.js starts blending the tab
                                   accents; bare channels so each rule below
                                   picks its own alpha */
  --glow: rgb(var(--glow-rgb));
  --dock-r: 20px;
  --bead-d: 54px;
  --bead-cy: 0px;
  --rise: 40px;                 /* how far the chosen icon climbs */

  position: relative;
  width: 100%;
  /* 58, not the original's 68: the bar was taking more of a phone screen
     than its five destinations need. The bead is sized as a fraction of this
     height in js/dock.js, so that fraction went up to keep the ring the same
     size on a shorter plate. */
  height: 58px;
  flex: none;
  touch-action: pan-y;          /* a vertical swipe still scrolls the page */
  -webkit-tap-highlight-color: transparent;

  /* Without JS this is just a rounded bar, which is a working navigation.
     Rounded only where it meets the page — the bottom edge is the bottom of
     the screen and has nothing to round against. */
  background: var(--bar);
  border-radius: var(--dock-r) var(--dock-r) 0 0;
}
.js .dock { background: none; }

.dock__skin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: var(--plate-shadow);
}
.dock__fill {
  fill: url(#dockPlate);
  stroke: url(#dockRim);
  stroke-width: 1;
}
.dock__plate-hi { stop-color: var(--bar-hi); }
.dock__plate-lo { stop-color: var(--bar-lo); }
/* The plate's only edge against the page: brightest along the top where the
   light is, gone by the bottom. On the obsidian plate this is the original's
   specular white highlight; on the white one it has to be a darker line, or
   there is no edge at all. */
.dock__rim-hi { stop-color: var(--rim-hi); stop-opacity: var(--rim-hi-a); }
.dock__rim-lo { stop-color: var(--rim-lo); stop-opacity: var(--rim-lo-a); }

/* ── the dark theme: meniscus-liquid-nav's own plate, verbatim ────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dock {
    /* Same idea on the dark ground: the plate is the page's own top
       colour, lifted a little so it still sits above the page rather
       than dissolving into it. The original's obsidian was a
       purple-black on a purple-black room; this page's room is a
       blue-black, and the bar now belongs to it. */
    --bar: var(--page-1);
    --bar-hi: color-mix(in oklab, var(--page-1) 92%, #ffffff);
    --bar-lo: var(--page-1);
    --icon-off: #a79eb8;        /* inactive icon on the plate — 7.1:1 */
    --rim-hi: #fff; --rim-hi-a: .60;
    --rim-lo: #fff; --rim-lo-a: .06;
    --plate-shadow: drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
  }
  /* The accent as shipped: on this plate lime reads 14.5:1 and the deepest
     of the five 5.9:1, so nothing has to be adjusted. */
  :root:not([data-theme="light"]) .tab__label { color: var(--acc); }
}
:root[data-theme="dark"] .dock {
  /* Same idea on the dark ground: the plate is the page's own top
     colour, lifted a little so it still sits above the page rather
     than dissolving into it. The original's obsidian was a
     purple-black on a purple-black room; this page's room is a
     blue-black, and the bar now belongs to it. */
  --bar: var(--page-1);
  --bar-hi: color-mix(in oklab, var(--page-1) 92%, #ffffff);
  --bar-lo: var(--page-1);
  --icon-off: #a79eb8;
  --rim-hi: #fff; --rim-hi-a: .60;
  --rim-lo: #fff; --rim-lo-a: .06;
  --plate-shadow: drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
}
:root[data-theme="dark"] .tab__label { color: var(--acc); }

/* ── the bead ─────────────────────────────────────────────────────────── */

.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%;
  /* Derived from --glow, which js/dock.js rewrites as the bead travels, so
     the whole bead takes the colour of the tab it is over — hard-coded stops
     would have left it purple no matter where it landed. */
  background: linear-gradient(168deg, color-mix(in srgb, var(--glow) 76%, #fff), var(--glow) 62%);
  /* The original's own stack, now that the plate under it is the original's
     too: the tight ring keeps the edge crisp inside the socket's clearance,
     the wide bloom spills accent light onto the plate, and the offset shadow
     under both is what seats it in the dish rather than floating it above
     one. */
  box-shadow:
    0 0 0 1px rgb(var(--glow-rgb) / .5),
    0 0 26px 2px rgb(var(--glow-rgb) / .32),
    0 10px 18px -7px rgba(0, 0, 0, .68),
    inset 0 0 0 1px rgba(255, 255, 255, .42),
    inset 0 -3px 6px -3px rgba(26, 16, 34, .18);
  will-change: transform;
  pointer-events: none;
}
/* Hidden until the script has measured the bar, so it never flashes in the
   wrong place on the first paint. */
.dock:not(.is-ready) .dock__bead { opacity: 0; }

/* ── the tabs ─────────────────────────────────────────────────────────── */

.dock__tabs {
  position: absolute;
  inset: 0;
  display: flex;
  padding-inline: clamp(10px, 4%, 22px);
  /* Physical order, never mirrored: the bar's five destinations stay in the
     same places in Persian as in English, the way the phone's own tab bars
     do. The script measures positions, so a flip would move the bead's
     dish away from the icon it is meant to hold. */
  direction: ltr;
}

.tab {
  position: relative;
  flex: 1;
  display: block;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 14px;
  --t: 0;                       /* 0 = resting on the bar · 1 = in the bead */
  /* Each tab's accent is written on it in the markup; this is the fallback
     for one that has not been given one. */
  --acc: #a855f7;
}
.tab:focus-visible { outline: 2px solid var(--glow); outline-offset: -3px; }

.tab__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ink on the plate, white once it has climbed into 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: 0;
  right: 0;
  bottom: 8%;
  font-size: 11.5px;            /* up from 10.5 — it is the only word on the
                                   bar naming where you are, and it was
                                   losing against the icon above it */
  font-weight: 800;
  /* The light theme's plate is a pale lavender and the five accents were
     chosen for a near-black one — lime on it is 1.3:1. Mixing toward ink
     keeps the hue and buys the contrast back. 40% is where the weakest of
     them clears 4.5:1 against the BOTTOM of the plate, which is where the
     labels sit and the darkest part of its gradient — measuring against the
     top would have passed a label that fails where it actually is. The dark
     theme above overrides this with the accent as shipped. */
  color: color-mix(in oklab, var(--acc) 40%, #241a33);
  opacity: 0;
  transform: translateY(calc((1 - var(--t)) * 7px));
  pointer-events: none;
  white-space: nowrap;
}
/* Only the chosen tab is named. While the bead is dragged every label
   previews, so you can see where you are about to land. */
.tab[aria-selected="true"] .tab__label,
.dock.is-dragging .tab__label { opacity: var(--t); }

@media (max-width: 380px) {
  .tab__icon { width: 22px; height: 22px; font-size: 22px; }
  .tab__label { font-size: 10.5px; }
}

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

/* ── The container the bar sits in ──────────────────────────────────────
 *
 * .bottom-fixed-inner used to *be* the bar: a translucent plate with rounded
 * top corners and its own shadow. The dock draws all of that itself now, and
 * the old plate did two harmful things — its background hid the dock's own
 * surface, and its overflow:hidden cut off the bead, which by design rises
 * above the bar's top edge.
 */
.bottom-fixed-inner:has(.dock) {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  /* Room above the bar for the bead and the icon that climbs into it. */
  padding-top: 22px;
}

/* Browsers without :has() still need the clipping gone, or the bead is cut in
 * half. They lose the extra head room, not the navigation. */
@supports not (selector(:has(*))) {
  .bottom-fixed-inner { overflow: visible; }
}