/* ============================================================
   THE PHONE'S TAB BAR (25 Oct 2026, his ask and his pick, design C)
   ============================================================
   Below 900px the masthead nav steps aside (styles.css, .bar-nav) and the
   sections live here: a floating bar in Apple's Liquid Glass (iOS 26), laid
   out like Apple Music. Above the tabs floats what you are on (the role and
   its Apply on a job page, today's challenge on the board); scrolling down
   folds the tabs into one glass orb holding your section and slides that
   accessory down beside it; scrolling up opens it again. Pressing the bar
   lifts a clear lens out of it that follows the finger and lands on a tab.

   tabbar.js builds the bar from the masthead's own .bar-nav links and drives
   every moving size and position with springs, so this sheet holds the
   materials and the resting layout only: no transitions on anything tabbar.js
   moves (a transition would lag the spring it is fed every frame).

   THE GLASS has four layers: a backdrop that frosts and, in Chromium, bends
   what passes under the rim (backdrop-filter: url(#svg), behind .tb-refract,
   which tabbar.js adds only where it draws); a tint; a ring of light whose
   angle follows the phone's tilt; and a soft inner sheen. Safari and
   Firefox keep the frost, the tint and the light.

   NEVER put opacity, filter, mask or clip-path on an element that holds a
   .tb-glass (the bar, the capsule, the accessory). Chromium then makes it a
   backdrop root and the glass inside frosts an empty layer instead of the
   page (measured: sharp text behind the bar). Fades go on the glass itself
   and on the content, separately. */

:root { --tabbar: 1; }

/* The gradients the icons share and the refraction filters live in one
   zero-size SVG; not display:none, which would switch the filters off. */
.tb-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* An icon's swell under the lens is the one thing here CSS animates. */
@property --tb-swell { syntax: '<number>'; inherits: true; initial-value: 1; }

.tabbar {
  /* Geometry, read by tabbar.js too. 62px is Apple's bar; the folded bar
     and the accessory are the height of a thumb. */
  --tb-h: 62px;
  --tb-orb: 54px;
  --tb-gap: 8px;
  display: none;
}

@media (max-width: 900px) {
  .tabbar {
    --tb-edge: 12px;
    --tb-foot: max(10px, env(safe-area-inset-bottom));
    /* The glass, dark theme (the site's default): clear enough to see the
       page move under it, with the frost and the tint keeping labels legible
       over a headline. */
    --tb-tint: rgba(24, 24, 28, .44);
    --tb-blur: 10px;
    --tb-rim-hi: rgba(255, 255, 255, .7);
    --tb-rim-lo: rgba(255, 255, 255, .32);
    --tb-sheen: rgba(255, 255, 255, .13);
    --tb-shade: 0 14px 34px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
    --tb-sel: rgba(255, 255, 255, .14);
    --tb-glow: rgba(255, 255, 255, .22);
    --tb-mono: var(--ink);
    --tb-mono-2: #74747d;
    --tb-label: var(--ink);
    --tb-halo: 0 1px 2px rgba(0, 0, 0, .55);

    position: fixed; z-index: 60;
    left: var(--tb-edge); right: var(--tb-edge); bottom: var(--tb-foot);
    height: var(--tb-h);
    display: block;
    font-family: var(--ui);
    transform-origin: 50% 100%;
    -webkit-tap-highlight-color: transparent;
  }
  :root[data-theme="light"] .tabbar {
    --tb-tint: rgba(255, 255, 255, .5);
    --tb-blur: 12px;
    --tb-rim-hi: rgba(255, 255, 255, 1);
    --tb-rim-lo: rgba(255, 255, 255, .7);
    --tb-sheen: rgba(255, 255, 255, .55);
    --tb-shade: 0 14px 34px rgba(0, 0, 0, .15), 0 2px 6px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .1);
    --tb-sel: rgba(9, 9, 11, .08);
    --tb-glow: rgba(255, 255, 255, .8);
    --tb-mono: #18181b;
    --tb-mono-2: #a1a1aa;
    --tb-halo: 0 1px 1px rgba(255, 255, 255, .85);
  }

  /* The page keeps its last lines clear of the bar. */
  html.has-tabbar body { padding-bottom: calc(var(--tb-h) + 26px + env(safe-area-inset-bottom)); }
  html.has-tabbar .snack { bottom: calc(var(--tb-h) + 22px + env(safe-area-inset-bottom)); }
  html.has-tabbar.tb-acc-up body { padding-bottom: calc(var(--tb-h) + var(--tb-orb) + 34px + env(safe-area-inset-bottom)); }
}

/* ---------- the glass ---------- */
.tb-glass {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  background: var(--tb-tint);
  -webkit-backdrop-filter: blur(var(--tb-blur)) saturate(1.5) brightness(1.05);
  backdrop-filter: blur(var(--tb-blur)) saturate(1.5) brightness(1.05);
  box-shadow:
    inset 0 0 0 .5px color-mix(in srgb, var(--tb-rim-lo) 60%, transparent),
    inset 0 -8px 16px -12px rgba(0, 0, 0, .35),
    var(--tb-shade);
  opacity: var(--tb-e, 1);
  pointer-events: none;
}
.tb-refract .tb-glass {
  -webkit-backdrop-filter: var(--tb-f,) blur(var(--tb-blur)) saturate(1.5) brightness(1.05);
  backdrop-filter: var(--tb-f,) blur(var(--tb-blur)) saturate(1.5) brightness(1.05);
}
/* The ring of light: bright where the light comes from, bright again on the
   far edge where it leaves, dim at the sides. --tb-ang turns it as the phone
   tilts (tabbar.js). */
.tb-glass::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.25px;
  background: linear-gradient(var(--tb-ang, 135deg),
    var(--tb-rim-hi) 0%, color-mix(in srgb, var(--tb-rim-lo) 40%, transparent) 22%,
    transparent 45%, transparent 58%,
    color-mix(in srgb, var(--tb-rim-lo) 50%, transparent) 82%, var(--tb-rim-lo) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
/* The sheen: light pooled under the top of the curve. */
.tb-glass::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 50% -25%, var(--tb-sheen), transparent 62%);
}

/* ---------- the capsule and its tabs ---------- */
.tb-cap {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  width: 100%; height: var(--tb-h);
  display: flex; align-items: stretch;
  padding: 4px;
  border-radius: var(--r-pill);
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
/* The finger's light, under the lens. */
.tb-light {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  background: radial-gradient(70px 56px at var(--tb-lx, 50%) 55%, var(--tb-glow), transparent 72%);
  opacity: calc(var(--tb-lift, 0) * .9);
  pointer-events: none;
}
.tb-tab {
  position: relative; z-index: 2;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: var(--r-pill);
  color: var(--tb-label);
  text-decoration: none;
  overflow: hidden;
}
.tb-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.tb-ic {
  position: relative; display: block; width: 26px; height: 26px; flex: none;
  /* Folded, the label goes and the icon settles to the middle of the orb. */
  translate: 0 calc(var(--tb-p, 0) * 7.5px);
  scale: var(--tb-swell);
  transition: --tb-swell .4s var(--spring);
}
.tb-ic svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; transition: opacity .22s var(--snap); }
.tb-tab:active .tb-ic { --tb-swell: .9; }
.tb-tab.is-under .tb-ic { --tb-swell: 1.16; }
.tb-l {
  display: block; max-width: 100%;
  font-size: 10.5px; line-height: 13px; font-weight: 500; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: var(--tb-halo);
  opacity: clamp(0, calc(1 - var(--tb-p, 0) * 3.2), 1);
}
.tb-tab.is-on .tb-l { font-weight: 600; }
/* "Leaderboard" in a 56px tab: the smallest phones (320-350px) set the
   labels a step tighter rather than cut the word (measured at 320). */
@media (max-width: 350px) { .tb-l { font-size: 9.5px; letter-spacing: -.025em; } .tb-cap { padding: 4px 2px; } }

/* Every icon is drawn twice: in its own colours (.ic-c) for the section you
   are in and the one under the lens, and in one ink with a quieter second
   tone (.ic-m), the way Apple draws a filled symbol, for the rest. They
   cross-fade, so the lens passing over a tab lights it rather than flips it. */
.tb-ic .ic-c { opacity: 0; }
.tb-tab.is-on .ic-c, .tb-tab.is-under .ic-c { opacity: 1; }
.tb-tab.is-on .ic-m, .tb-tab.is-under .ic-m { opacity: 0; }
.ic-m .m { fill: var(--tb-mono); stroke: none; }
.ic-m .c { fill: var(--tb-mono-2); stroke: none; }
.ic-m .k { stroke: var(--tb-mono); }
.ic-m .s { display: none; }
:root:not([data-theme="light"]) .tb-ic { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .3)); }

/* ---------- the selection: a pill at rest, a lens when pressed ----------
   One element. tabbar.js sizes and places it every frame; between rest and
   lens it is a blend of the two, so the pill swells into the lens and the
   lens melts back into the pill. */
.tb-sel {
  position: absolute; z-index: 1; left: 0; top: 0;
  width: 0; height: 0;
  border-radius: var(--r-pill);
  background: var(--tb-sel);
  pointer-events: none;
  will-change: transform, width;
}
.tb-sel.is-lens {
  z-index: 3;
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: brightness(1.12) saturate(1.6);
  backdrop-filter: brightness(1.12) saturate(1.6);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .5),
    inset 2px 2.5px 1px -1px rgba(255, 255, 255, .95),
    inset -2px -2.5px 2px -1px rgba(255, 255, 255, .4),
    inset 0 -6px 12px -8px rgba(0, 0, 0, .25),
    0 10px 24px rgba(0, 0, 0, .26);
}
.tb-refract .tb-sel.is-lens {
  -webkit-backdrop-filter: var(--tb-lf,) brightness(1.08) saturate(1.6);
  backdrop-filter: var(--tb-lf,) brightness(1.08) saturate(1.6);
}

/* ---------- the accessory: what you are on (Apple's mini player) ---------- */
.tb-acc, .tabbar .dock {
  position: absolute; left: 0; right: auto; bottom: 0; z-index: 1;
  width: 100%; height: var(--tb-orb);
  display: flex; align-items: center; gap: 11px;
  padding: 0 7px;
  border: 0; border-radius: var(--r-pill);
  background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transform: none;
  transition: none;
  will-change: transform, width;
}
.tb-acc > :not(.tb-glass), .tabbar .dock > :not(.tb-glass) { position: relative; z-index: 1; opacity: var(--tb-q, 1); }
.tb-acc > .tb-glass, .tabbar .dock > .tb-glass { opacity: calc(var(--tb-q, 1) * var(--tb-e, 1)); }
.tb-art {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px; overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12);
}
.tb-art.is-ink { display: grid; place-items: center; background: #1f1f23; }
.tb-art.is-ink svg { width: 28px; height: 28px; }
.tb-art img, .tb-art svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.tb-acc-t, .tabbar .dock-t { min-width: 0; flex: 1; text-decoration: none; color: var(--tb-label); }
.tb-acc-t b, .tabbar .dock-t b {
  display: block; font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--tb-label);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: var(--tb-halo);
}
.tb-acc-t span, .tabbar .dock-t span {
  display: block; margin-top: 0; font-size: 12px; line-height: 16px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: var(--tb-halo);
}
.tb-play {
  flex: none; width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--cta); color: var(--cta-ink);
  text-decoration: none;
  transition: transform var(--d-press) var(--snap);
}
.tb-play:active { transform: scale(.9); }
.tb-play svg { width: 15px; height: 15px; margin-left: 2px; }
.tabbar .dock .btn-apply { height: 40px; padding: 0 16px; font-size: 14px; }

@media (prefers-reduced-transparency: reduce) {
  .tb-glass, .tb-refract .tb-glass { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tb-glass::before, .tb-glass::after { display: none; }
}
@media (prefers-contrast: more) {
  .tb-glass, .tb-refract .tb-glass { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--rule-2); }
  .tb-glass::before, .tb-glass::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tabbar, .tabbar * { animation: none !important; transition: none !important; }
}