/* ============================================================
   THE BOARD · pinbar.css — sticky bottom bar + pill menu
   Bar: 4 filter tabs + raised center add FAB (callbar pattern)
   Pills: stacked type buttons slide up from the FAB
   ============================================================ */

/* ---------- bar ---------- */
.pinbar{position:fixed;left:0;right:0;bottom:0;z-index:75;
  display:flex;align-items:flex-end;height:calc(64px + env(safe-area-inset-bottom));
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:rgba(10,10,10,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(232,220,196,.14)}
.pinbar .pb-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding-bottom:2px;color:rgba(232,220,196,.55);background:none;border:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:color .12s,transform .08s}
.pinbar .pb-tab:active{transform:scale(.92)}
.pinbar .pb-tab svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pinbar .pb-tab span{font-family:var(--f-mono);font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pinbar .pb-tab.on{color:var(--teal)}
.pinbar .pb-gap{width:76px;flex-shrink:0}

/* ---------- center add FAB ---------- */
.pinbar .pb-fab{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 20px);
  transform:translateX(-50%);
  width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;
  background:var(--teal-2);color:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  box-shadow:0 0 0 5px rgba(10,10,10,.95), 0 12px 24px -8px rgba(107,155,148,.7);
  transition:background .15s, transform .15s;-webkit-tap-highlight-color:transparent}
.pinbar .pb-fab:active{transform:translateX(-50%) scale(.94);background:#32554f}
.pinbar .pb-fab .plus{position:relative;width:20px;height:20px;transition:transform .25s cubic-bezier(.32,.72,.28,1)}
.pinbar .pb-fab .plus::before,.pinbar .pb-fab .plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--cream);border-radius:2px}
.pinbar .pb-fab .plus::before{width:20px;height:3px;transform:translate(-50%,-50%)}
.pinbar .pb-fab .plus::after{width:3px;height:20px;transform:translate(-50%,-50%)}
.pinbar .pb-fab i{font-family:var(--f-mono);font-style:normal;font-size:7px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
body.pills-open .pinbar .pb-fab{background:var(--teal)}
body.pills-open .pinbar .pb-fab .plus{transform:rotate(45deg)}

/* ---------- pill menu (slides up from the FAB) ---------- */
.pillmenu{position:fixed;right:16px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:74;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.pillmenu .pm-pill{display:flex;align-items:center;gap:12px;border:none;cursor:pointer;
  padding:9px 26px 9px 10px;border-radius:999px;min-width:190px;
  font-family:var(--f-mono);font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  opacity:0;transform:translateY(26px) scale(.9);
  transition:opacity .26s cubic-bezier(.32,.72,.28,1), transform .26s cubic-bezier(.32,.72,.28,1);
  -webkit-tap-highlight-color:transparent}
.pillmenu .pm-pill .ic{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.pillmenu .pm-pill .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pillmenu .pm-pill small{font-size:8px;letter-spacing:.1em;opacity:.7;display:block;margin-top:2px}
.pillmenu .pm-pill:active{transform:scale(.95)}
body.pills-open .pillmenu .pm-pill{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
body.pills-open .pillmenu .pm-pill:nth-child(1){transition-delay:.12s}
body.pills-open .pillmenu .pm-pill:nth-child(2){transition-delay:.08s}
body.pills-open .pillmenu .pm-pill:nth-child(3){transition-delay:.04s}
body.pills-open .pillmenu .pm-pill:nth-child(4){transition-delay:0s}
.pm-pill.pm-sticky{background:var(--teal);color:var(--char)}
.pm-pill.pm-sticky .ic{background:rgba(10,10,10,.14)}
.pm-pill.pm-card{background:var(--cream);color:var(--char)}
.pm-pill.pm-card .ic{background:rgba(10,10,10,.1)}
.pm-pill.pm-flyer{background:var(--teal-2);color:var(--cream)}
.pm-pill.pm-paper{background:#1f1b16;color:var(--cream);box-shadow:0 12px 28px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(232,220,196,.25)}

/* scrim behind pills */
.pill-scrim{position:fixed;inset:0;z-index:73;background:rgba(10,10,10,.6);opacity:0;pointer-events:none;transition:opacity .24s}
body.pills-open .pill-scrim{opacity:1;pointer-events:auto}

/* ---------- filtering: non-matching pins fade away, matches snap together (FLIP via JS) ---------- */
.pin-wrap{transition:opacity .25s}
.pin-wrap.f-out{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s, visibility 0s .25s}
.slot-empty.f-out{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s, visibility 0s .25s}
.pin-wrap.fliping{transition:transform .36s cubic-bezier(.32,.72,.28,1), opacity .25s;z-index:20}

/* clear-filter chip above the bar */
.filter-chip{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,16px);z-index:72;
  display:flex;align-items:center;gap:10px;background:var(--cream);color:var(--char);
  border:none;cursor:pointer;border-radius:999px;padding:8px 14px;
  font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  box-shadow:0 10px 24px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s, transform .2s}
body[data-filter] .filter-chip{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.filter-chip b{color:var(--teal-2)}
.filter-chip .x{width:16px;height:16px;border-radius:50%;background:var(--char);color:var(--cream);display:grid;place-items:center;font-size:10px;line-height:1}

/* layout adjustments for the bar */
.foot{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
.move-bar{bottom:calc(96px + env(safe-area-inset-bottom))}