/* The rubber band tab bar: a putty-coloured bar alone on a white page. The tab you are on stands up as a white peg
   with a cobalt rubber band round it; the band itself is drawn by the script, which reads its colours here. */
:root {
  --page: #ffffff;          /* the page */
  --bar: #efece6;           /* the bar, a matte rubber mat */
  --peg: #ffffff;           /* the top of the peg that stands up */
  --icon: #9a9488;          /* an icon lying flat in the bar */
  --ink: #1c1b19;           /* the icon on the peg, and the chosen tab's name */
  --band: #ff5a1f;          /* the elastic cord */
  --band-pale: #ffc4a6;     /* the cord where it is stretched hard: rubber goes pale */
  --band-edge: #a8300a;     /* the cord's shaded side and its woven stripes */
  --clasp: #c3c7cd;         /* the metal clasp that closes the loop */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Funnel Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

/* ---------------------------------------------------------------- the bar */
/* as wide as a phone's tab bar, never wider than 420 pixels nor than the screen */
.bar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: min(420px, 100%);
  height: 70px;
  padding: 0 8px;
  border-radius: 24px;
  background: var(--bar);
  touch-action: pan-y;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(60, 50, 35, 0.06),
    0 0 0 1px rgba(60, 50, 35, 0.07),
    0 18px 30px -18px rgba(50, 40, 25, 0.38),
    0 4px 10px -5px rgba(50, 40, 25, 0.16);
  -webkit-tap-highlight-color: transparent;
}

/* the band, drawn over the tabs; it never reaches the names */
.bar__band {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.tab {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  padding: 9px 0 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--icon);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* the cap: the peg and its icon, moved by the script (rising, leaning when the band pulls) */
.tab__cap {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  will-change: transform;
}

/* the top of the peg: it shows as the peg stands up */
.tab__peg {
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: var(--peg);
  box-shadow:
    inset 0 -1px 0 rgba(60, 50, 35, 0.08),
    0 1px 1.5px rgba(50, 40, 25, 0.18),
    0 5px 10px -3px rgba(50, 40, 25, 0.22);
  opacity: 0;
  transform: scale(0.7);
}

.tab__icon {
  position: relative;
  width: 22px;
  height: 22px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.tab__icon [data-part] {
  transform-box: view-box;
}

/* the icon goes dark as its peg stands up, grey as it lies down again */
.tab__cap {
  transition: color 0.18s ease-out;
}

.tab.is-up .tab__cap {
  color: var(--ink);
}

.tab__label {
  margin-top: 9px;
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0.01em;
  line-height: 13px;
  white-space: nowrap;
  transition: color 0.2s ease-out, font-weight 0.2s ease-out;
}

.tab[aria-current='page'] .tab__label {
  color: var(--ink);
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .tab:not(.is-up):hover .tab__cap {
    color: color-mix(in srgb, var(--icon) 45%, var(--ink));
  }

  .tab:not([aria-current='page']):hover .tab__label {
    color: color-mix(in srgb, var(--icon) 45%, var(--ink));
  }
}

/* pressed: the icon gives a little under the finger (the script moves the cap, the CSS the icon in it) */
.tab:active .tab__icon {
  transform: scale(0.86);
  transition: transform 0.08s ease-out;
}

.tab[aria-current='page'] {
  cursor: grab;
}

.bar.is-pulling,
.bar.is-pulling .tab {
  cursor: grabbing;
}

.tab:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -5px;
  border-radius: 20px;
}

html[data-using='pointer'] .tab:focus-visible {
  outline: none;
}