/* ==========================================================
   Magnifying dock — vanilla port of the framer-motion Dock.
   dock.js drives every width; this file is the look, the two
   resting places and the label.

   The original wrapped the row in an overflow-x:auto box and
   sprang its height so the tooltips had somewhere to go. Here
   the wrapper simply doesn't clip, so that spring is gone and
   the panel never shifts under the pointer.
   ========================================================== */
.dock{
  position:fixed;left:50%;top:0;z-index:50;
  display:flex;justify-content:center;
  pointer-events:none;                 /* only the panel is a target */
  transform:translate(-50%,20px);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
/* once the header has scrolled away the dock settles at the foot of the
   viewport, where a dock belongs, and follows the reader down */
.dock.is-floating{transform:translate(-50%,calc(100dvh - 100% - 24px));}
@media (prefers-reduced-motion:reduce){
  .dock{transition:none;}
}

.dock-panel{
  pointer-events:auto;
  /* dock.js reads these, so a media query is all it takes to resize the
     whole thing — the magnification maths follows automatically */
  --dock-base:88px;
  --dock-mag:124px;
  --dock-icon-ratio:.265;
  --dock-magnify:1;

  display:flex;align-items:stretch;gap:10px;
  height:76px;padding:0 14px;
  border-radius:20px;
  background:var(--panel-fill-hi);border:1px solid var(--panel-line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
/* over the page rather than over the dark band, it needs a real surface */
.dock.is-floating .dock-panel{
  background:var(--surface);border-color:var(--border);
  box-shadow:0 20px 50px rgba(4,16,46,.22), 0 2px 6px rgba(4,16,46,.08);
}

.dock-item{
  position:relative;flex:0 0 auto;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:0 4px;
  /* The resting width, stated here as well as in dock.js, because the
     two have to agree before the script has run. Left to the caption an
     item is as wide as the word inside it, and the moment dock.js gives
     every one of them 88px the whole row slides — a third of a screen of
     movement on a page that has otherwise finished loading. */
  width:var(--dock-base);
  color:var(--panel-ink);
  transition:color .3s ease;
}
.dock.is-floating .dock-item{color:var(--text);}
.dock-item:hover{color:var(--panel-accent);}
.dock.is-floating .dock-item:hover{color:var(--amber-dark);}
:root[data-theme="dark"] .dock.is-floating .dock-item:hover{color:var(--amber-light);}
.dock-item:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:12px;}

.dock-icon{
  display:grid;place-items:center;flex:0 0 auto;
  /* dock.js sets these together as an item bulges, so the glyph scales
     squarely instead of stretching. The resting size is the same sum it
     makes — the base width times the ratio — so nothing moves when the
     script takes over. */
  width:calc(var(--dock-base) * var(--dock-icon-ratio));
  height:calc(var(--dock-base) * var(--dock-icon-ratio));
}
.dock-icon svg{
  width:100%;height:100%;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- caption ----------
   The original showed the name as a tooltip on hover. Here it is always
   under the glyph, so the dock reads without a pointer at all. */
.dock-label{
  font-family:"Noto Sans Georgian","Plus Jakarta Sans",sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:-.01em;line-height:1;
  white-space:nowrap;
  opacity:.74;transition:opacity .3s ease;
}
.dock-item:hover .dock-label,
.dock-item:focus-visible .dock-label{opacity:1;}

@media (max-width:620px){
  .dock{transform:translate(-50%,14px);width:100%;padding:0 10px;}
  .dock.is-floating{transform:translate(-50%,calc(100dvh - 100% - 16px));}
  /* no pointer to magnify with, so the row simply divides the width evenly
     and dock.js stays out of the layout */
  .dock-panel{
    --dock-magnify:0;
    width:100%;height:66px;gap:2px;padding:0 6px;border-radius:16px;
  }
  /* nothing magnifies down here — the row divides the width evenly, so
     the resting width above is handed back to the flexbox */
  .dock-item{flex:1 1 0;width:auto;min-width:0;padding:0 2px;gap:5px;}
  .dock-icon{width:22px;height:22px;}
  .dock-label{font-size:9px;letter-spacing:-.03em;}
}

/* ==========================================================
   TOOLS IN THE DOCK
   The theme and the language moved out of the header and in
   here, so they ride down the page with the navigation instead
   of scrolling away with the masthead.
   ========================================================== */
.dock-sep{
  align-self:center;flex:0 0 auto;
  width:1px;height:38px;margin:0 2px;
  background:currentColor;opacity:.16;
  color:var(--panel-ink);
}
.dock.is-floating .dock-sep{color:var(--text);}

/* the two tools are buttons, and a button brings its own chrome */
button.dock-item{
  font:inherit;border:0;background:none;padding:0 4px;cursor:pointer;
}

/* the sun and the moon stack in one cell, exactly as they did in the header,
   but here they take the item's colour rather than a hard white */
.dock-item .theme-toggle-icon{
  grid-area:1/1;width:100%;height:100%;
  stroke:currentColor;stroke-width:1.7;
}
.dock-item .icon-moon{fill:currentColor;stroke:none;}
:root[data-theme="dark"] .dock-item .icon-moon{fill:currentColor;}

/* ---------- language ---------- */
.dock-lang{position:relative;flex:0 0 auto;display:flex;}
#langLabel{font-variant-numeric:tabular-nums;letter-spacing:.06em;}

.dock-pop{
  position:absolute;z-index:20;left:50%;top:calc(100% + 12px);
  margin:0;padding:6px;list-style:none;min-width:150px;
  transform:translateX(-50%);
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 22px 46px rgba(4,16,46,.2), 0 2px 6px rgba(4,16,46,.07);
  opacity:0;transition:opacity .18s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
/* once the dock has dropped to the foot of the viewport the list has to open
   upward, or it opens off the bottom of the screen */
.dock.is-floating .dock-pop{top:auto;bottom:calc(100% + 12px);}
.dock-pop.is-open{opacity:1;}
.dock-pop:not(.is-open){transform:translateX(-50%) translateY(-6px);}
.dock.is-floating .dock-pop:not(.is-open){transform:translateX(-50%) translateY(6px);}
@media (prefers-reduced-motion:reduce){
  .dock-pop{transition:none;}
}

.dock-pop-opt{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;border-radius:10px;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.dock-pop-opt:hover{background:var(--active-fill);color:#fff;}
.dock-pop-opt::before{
  content:"";width:6px;height:6px;border-radius:999px;flex:0 0 auto;
  background:currentColor;opacity:0;transition:opacity .2s ease;
}
.dock-pop-opt[aria-selected="true"]{color:var(--amber-dark);}
:root[data-theme="dark"] .dock-pop-opt[aria-selected="true"]{color:var(--amber-light);}
.dock-pop-opt[aria-selected="true"]::before{opacity:1;}

/* ==========================================================
   RESPONSIVE — narrow phones

   At 375px seven items share ~47px each, which is less than any
   Georgian label needs, so the captions come off the screen (they
   stay in the accessibility tree) and the glyphs grow to carry the
   row on their own, the way a phone tab bar does.
   ========================================================== */
@media (max-width:520px){
  .dock-panel{height:58px;gap:0;padding:0 4px;}
  .dock-item{gap:0;padding:0;}
  .dock-icon{width:24px;height:24px;}
  .dock-label{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .dock-sep{height:26px;}
}
/* keep the floating dock above the home indicator on notched phones */
@media (max-width:620px){
  .dock.is-floating{transform:translate(-50%,calc(100dvh - 100% - 16px - env(safe-area-inset-bottom,0px)));}
}

/* ==========================================================
   BACK TO TOP
   A climb back up for the long pages. It waits until there is
   something to climb (see totop.js) and it never stands on the
   dock: once the header has scrolled away the dock settles at
   the foot of the screen, and on a phone its pill is nearly the
   width of it, so the button sits above rather than beside.
   ========================================================== */
.totop{
  position:fixed;right:20px;bottom:30px;z-index:45;
  width:46px;height:46px;padding:0;border:0;border-radius:999px;
  display:grid;place-items:center;cursor:pointer;
  background:var(--amber);color:var(--on-amber);
  box-shadow:0 10px 26px rgba(200,132,47,.4);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.92);
  transition:opacity .25s ease, visibility .25s,
             transform .3s cubic-bezier(.22,.61,.36,1), background .2s ease;
}
.totop.is-on{opacity:1;visibility:visible;transform:none;}
.totop:hover{background:var(--amber-light);}
.totop:focus-visible{outline:2px solid var(--amber);outline-offset:4px;}
.totop svg{
  width:20px;height:20px;
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}
@media (max-width:900px){
  /* clear of the dock, and of the home indicator under it */
  .totop{
    right:14px;bottom:calc(96px + env(safe-area-inset-bottom,0px));
    width:42px;height:42px;
  }
  .totop svg{width:18px;height:18px;}
}
@media (prefers-reduced-motion:reduce){
  .totop{transform:none;transition:opacity .2s ease, visibility .2s;}
  .totop.is-on{transform:none;}
}