/* tabbar.css — the floating glass pill nav.
 *
 * Loaded AFTER each page's inline <style> on purpose: the pages all carry their
 * own older .tabs rules, and rather than edit five copies of them, this file
 * wins on document order at equal specificity. Anything the old rules set that
 * this one doesn't is reset explicitly below (border-top, padding) — otherwise
 * it leaks through.
 *
 * The lens (.tabs__lens) is positioned by tabbar.js, not by CSS, because the
 * pages are separate documents: the slide you see when you change tab is
 * animated from the PREVIOUS page's tab position, which only JS can know.
 */
:root{ --tabbar-h:92px; }

/* The veil under the floating bar.
 *
 * Two rules it has to obey, both learned the hard way:
 *  1. It NEVER reaches full opacity. Content in the gap under and beside the
 *     pill stays legible, so a row moving past reads as travelling THROUGH the
 *     bar rather than being erased behind a solid block.
 *  2. It holds its final value all the way down to 0 rather than ramping to a
 *     stop. Anchoring the strong end to the screen bottom is what produced a
 *     visible horizontal seam, because in iOS Safari a fixed bottom:0 sits
 *     behind the browser toolbar, so the seam landed in view. Flat to the
 *     bottom means there is no edge to see wherever the viewport actually ends.
 *
 * The ramp is long (~90px) on purpose. The short one stepped visibly as it
 * crossed a white card.
 */
.tabbar-scrim{
  position:fixed;z-index:49;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;height:170px;pointer-events:none;
  /* Measured from the bottom. 0–12px is the GAP under the pill and 12–76px is
     hidden behind it, so the fade can be strong in the gap and gentle above the
     bar, with the whole transition between the two happening out of sight
     behind the pill. That split is the effect: content in the gap reads as
     tucked under the bar, while content approaching from above stays crisp
     until it is nearly there. */
  background:linear-gradient(to top,
    rgba(var(--paper-rgb,244,242,236),.82) 0,
    rgba(var(--paper-rgb,244,242,236),.78) 12px,
    rgba(var(--paper-rgb,244,242,236),.4) 44px,
    rgba(var(--paper-rgb,244,242,236),.2) 76px,
    rgba(var(--paper-rgb,244,242,236),0) 170px);
}

.tabs{
  position:fixed;
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  left:50%; transform:translateX(-50%);
  width:calc(100% - 24px); max-width:452px;
  height:64px; padding:0 4px;
  background:transparent;            /* the glass is painted by ::before/::after */
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border:none; border-top:none; border-radius:34px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.5),
    inset 1.5px 0 2px -1px rgba(120,190,255,.3),
    inset -1.5px 0 2px -1px rgba(255,170,220,.28),
    inset 0 -1px 0 rgba(255,255,255,.35),
    0 1px 2px rgba(11,15,13,.06),
    0 14px 34px -10px rgba(11,15,13,.2);
  display:flex; align-items:center; justify-content:space-around;
  z-index:50; overflow:visible;
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
/* Base glass: a light, even blur so what scrolls under the bar stays readable
   as a soft shape rather than vanishing. */
.tabs::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:rgba(255,255,255,.56);
  -webkit-backdrop-filter:blur(22px) saturate(190%); backdrop-filter:blur(22px) saturate(190%);
}
/* Rim refraction. Real glass is clearest through its middle and bends light
   hardest at the edge, so the heavy blur is masked to the rim. CSS cannot
   actually displace what is behind an element — that is a native renderer
   effect — but the clear-centre, distorted-edge gradient is the part the eye
   reads as glass, and it changes continuously as content scrolls under it. */
.tabs::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  -webkit-backdrop-filter:blur(24px) saturate(150%) brightness(1.04);
  backdrop-filter:blur(24px) saturate(150%) brightness(1.04);
  -webkit-mask:
    linear-gradient(to bottom,#000 0,rgba(0,0,0,.18) 40%,rgba(0,0,0,.18) 60%,#000 100%),
    linear-gradient(to right,#000 0,transparent 13%,transparent 87%,#000 100%);
  mask:
    linear-gradient(to bottom,#000 0,rgba(0,0,0,.18) 40%,rgba(0,0,0,.18) 60%,#000 100%),
    linear-gradient(to right,#000 0,transparent 13%,transparent 87%,#000 100%);
  -webkit-mask-composite:source-over; mask-composite:add;
}

/* The lens. Brightening and saturating what's behind it is what sells it as a
   piece of glass sitting ON the bar rather than a coloured pill drawn into it. */
/* A plain pane BEHIND the icons, sitting inside the bar and smaller than it.
   It used to magnify what sat under it, which made the selected icon a
   different size from its neighbours and needed three coordinate spaces to
   agree. Removed, matching the app. */
.tabs__lens{
  position:absolute; top:5px; height:54px; border-radius:27px;
  background:linear-gradient(180deg,#f0f0f4,#e4e4ea);
  -webkit-backdrop-filter:blur(2px) saturate(165%) brightness(1.1); backdrop-filter:blur(2px) saturate(165%) brightness(1.1);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,.75),
    inset 3px 0 6px -3px rgba(90,170,255,.75),
    inset -3px 0 6px -3px rgba(255,130,210,.7),
    inset 0 4px 8px -5px rgba(150,255,210,.5),
    inset 0 -4px 8px -5px rgba(255,210,120,.45),
    inset 0 -1.5px 0 rgba(255,255,255,.6),
    0 8px 20px -8px rgba(11,15,13,.28),
    0 1px 3px rgba(11,15,13,.1);
  pointer-events:none; z-index:1;
  transform-origin:center;
  transition:
    left .28s cubic-bezier(.22,1.1,.36,1),
    width .28s cubic-bezier(.22,1.1,.36,1),
    transform .28s cubic-bezier(.22,1.1,.36,1);
}
.tabs__lens[data-init="0"]{transition:none}

.tabs__lens[data-moving="1"]{transform:scaleX(1.1) scaleY(1.06)}

.tab{
  flex:1; position:relative; z-index:2;
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-user-drag:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:var(--faint); height:54px;
  transition:color .25s ease,transform .3s cubic-bezier(.34,1.3,.42,1);
}
.tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.tab span{font-size:10px;font-weight:500;font-family:'Geist Mono';letter-spacing:.02em;line-height:1}
.tab.on{color:var(--ink)}
/* Colour is driven by WHERE THE GLASS IS, not by which route is loaded. Waiting
   for navigation made the bar feel like it lagged the finger; lighting up as the
   lens passes over is what makes it feel attached to the drag. */
.tab.is-lit{color:var(--ink)}
.tab.is-lit svg{stroke:var(--volt-deep)}
.tab:active{transform:scale(.93)}
/* desktop: colour on hover, the way the reference lights icons under the pointer */
@media(hover:hover){ .tab:hover svg{stroke:var(--volt-deep)} }

/* The scan action stays a raised lime button — it's the one thing on this bar
   that does something rather than going somewhere, so it shouldn't look like a
   tab. The lens skips it. */
.tab.add{flex:0 0 62px}
.tab.add .fab{
  width:52px;height:52px;border-radius:50%;
  background:radial-gradient(120% 120% at 32% 18%,#d8fa74,var(--volt) 58%,#a9d93c);
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 14px -6px rgba(127,174,34,.5),0 2px 5px rgba(11,15,13,.16);
  transition:transform .3s cubic-bezier(.34,1.3,.42,1);
}
.tab.add .fab svg{width:25px;height:25px;stroke:#0b0f0d;stroke-width:2.5}
.tab.add:active .fab{transform:scale(.9)}

[data-theme="dark"] .tabs::before{
  background:rgba(26,31,28,.6);
}
[data-theme="dark"] .tabs::after{
  -webkit-backdrop-filter:blur(24px) saturate(190%) brightness(1.25);
  backdrop-filter:blur(24px) saturate(190%) brightness(1.25);
}
[data-theme="dark"] .tabs{
  background:transparent;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.1),
    0 1px 2px rgba(0,0,0,.4),
    0 16px 36px -12px rgba(0,0,0,.7);
}
[data-theme="dark"] .tabs__lens{
  background:linear-gradient(180deg,#2f3431,#262b28);
  -webkit-backdrop-filter:saturate(150%) brightness(1.5); backdrop-filter:saturate(150%) brightness(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.1),0 4px 12px -4px rgba(0,0,0,.5);
}

@media(prefers-reduced-motion:reduce){
  .tabs__lens{transition:none}
  .tab,.tab.add .fab{transition:none}
}