/* The floating action button, the slide-out sheet, its chips and the active-filter bar
   (.sh-bar, with .sh-link for "clear all") — sheet.mjs. An app
   colours them by setting these on :root (or any ancestor):
   --sh-surface  sheet and fan-label fill     --sh-ink    text
   --sh-muted    secondary text, headings     --sh-line   borders, the footer rule
   --sh-chip     an unpressed chip's fill     --sh-soft   an active (removable) chip's fill
   --sh-accent   the button, pressed chips, the primary action
   --sh-on       ink on the accent            --sh-badge  count badges (ink: --sh-on-badge)
   --sh-shadow   the floating shadow          --sh-title-font  the sheet title
   --sh-right / --sh-bottom  where the button floats
   A removable chip may carry its own --tc (a tag colour); it falls back to the accent.
   Every rule names a class, and button rules name the element too, so they outrank a
   page framework's zero-or-low-specificity button styles. */
:root{--sh-right:16px;--sh-bottom:18px}

/* ---- the action button and its fan ---- */
.sh-fan{position:fixed;right:var(--sh-right);bottom:calc(var(--sh-bottom) + env(safe-area-inset-bottom,0px));z-index:950;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px}
button.sh-fab{position:relative;width:58px;height:58px;padding:0;border-radius:50%;border:0;background:var(--sh-accent);
  color:var(--sh-on);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.28)}
button.sh-fab:active{transform:scale(.94)}
.sh-fabx{display:grid;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.sh-fan.on .sh-fabx{transform:rotate(135deg)}
.sh-badge{position:absolute;top:-3px;right:-3px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;
  display:grid;place-items:center;background:var(--sh-badge);color:var(--sh-on-badge,#fff);font-size:11.5px;
  font-weight:700;line-height:1;border:2px solid var(--sh-surface);box-sizing:border-box}
.sh-fanacts{display:flex;flex-direction:column;align-items:flex-end;gap:10px;margin-right:5px}
button.sh-fanact{display:flex;align-items:center;gap:10px;border:0;background:none;padding:0;cursor:pointer;
  font:inherit;color:var(--sh-ink);opacity:0;transform:translateY(calc(16px + var(--i) * 6px)) scale(.6);
  transform-origin:right center;pointer-events:none;
  transition:opacity .16s ease,transform .2s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 25ms)}
.sh-fan.on button.sh-fanact{opacity:1;transform:none;pointer-events:auto;transition-delay:calc(var(--i) * 35ms)}
.sh-fanlbl{background:var(--sh-surface);border:1px solid var(--sh-line);border-radius:999px;padding:6px 12px;
  font-size:13.5px;font-weight:600;box-shadow:var(--sh-shadow,0 2px 8px rgba(0,0,0,.15));white-space:nowrap}
.sh-fanico{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--sh-surface);color:var(--sh-accent);border:1px solid var(--sh-line);
  box-shadow:var(--sh-shadow,0 2px 8px rgba(0,0,0,.15))}
.sh-fanico svg{width:22px;height:22px}
.sh-fanscrim{position:fixed;inset:0;z-index:940;background:color-mix(in srgb,var(--sh-surface) 55%,transparent);
  backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);animation:sh-fade .16s ease}
/* an action only a keyboard user wants (a shortcuts list) */
.sh-fanact.kbonly{display:none}
@media (hover:hover) and (pointer:fine){ .sh-fan button.sh-fanact.kbonly{display:flex} }

/* ---- the sheet ---- */
.sh-scrim{position:fixed;inset:0;z-index:1000;background:rgba(10,10,10,.42);animation:sh-fade .18s ease}
.sh-sheet{position:fixed;left:0;right:0;bottom:0;z-index:1001;max-height:88dvh;display:flex;flex-direction:column;
  background:var(--sh-surface);color:var(--sh-ink);border-radius:22px 22px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.22);
  animation:sh-up .24s cubic-bezier(.2,.8,.2,1);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (min-width:760px){
  .sh-sheet{left:auto;top:0;width:420px;max-height:none;border-radius:22px 0 0 22px;animation:sh-in .24s cubic-bezier(.2,.8,.2,1)}
}
.sh-head{display:flex;align-items:center;padding:16px 12px 4px 20px}
.sh-head h2{flex:1;margin:0;font-family:var(--sh-title-font,inherit);font-size:24px;line-height:1.15;color:var(--sh-accent)}
button.sh-close{width:42px;height:42px;padding:0;border-radius:50%;border:0;background:transparent;color:var(--sh-muted);
  font-size:17px;cursor:pointer}
button.sh-close:hover{background:var(--sh-chip)}
.sh-body{flex:1;overflow-y:auto;padding:0 20px 14px;overscroll-behavior:contain}
.sh-body h3.sh-h{font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sh-muted);margin:18px 0 9px}
.sh-h small{text-transform:none;letter-spacing:0;font-weight:500;margin-left:5px}
.sh-foot{display:flex;gap:10px;justify-content:space-between;padding:12px 20px 14px;border-top:1px solid var(--sh-line)}
button.sh-btn{min-height:46px;padding:0 18px;border-radius:12px;border:0;background:transparent;color:var(--sh-accent);
  font:inherit;font-weight:700;font-size:14.5px;cursor:pointer}
button.sh-btn.primary{flex:1;background:var(--sh-accent);color:var(--sh-on)}
button.sh-btn:disabled{opacity:.4;cursor:default}

/* ---- chips ---- */
.sh-chips{display:flex;flex-wrap:wrap;gap:7px}
button.sh-chip{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--sh-line);background:var(--sh-chip);
  color:var(--sh-ink);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
button.sh-chip[aria-pressed="true"]{background:var(--sh-accent);border-color:var(--sh-accent);color:var(--sh-on)}
button.sh-chip:active{transform:scale(.96)}
button.sh-chip small{margin-left:4px;opacity:.65;font-size:12px}
button.sh-achip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 8px 0 12px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--tc,var(--sh-accent)) 55%,transparent);
  background:color-mix(in srgb,var(--tc,var(--sh-accent)) 14%,var(--sh-surface));color:var(--sh-ink);
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.sh-achip .sh-x{font-size:10px;opacity:.65}
.sh-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
button.sh-link{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:6px 4px;color:var(--sh-muted);font:inherit;font-size:12.5px;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (hover:hover){ button.sh-chip:hover{border-color:var(--sh-accent)} button.sh-fab:hover,.sh-fanico:hover{filter:brightness(1.08)} }

/* Shapes, scoped so they tie a framework's button radius (Clay's
   button:not(.circle):not(.chip) is 0,2,1) and win on load order. */
:is(.sh-fan,.sh-sheet,.sh-bar) :is(button.sh-fab,button.sh-close){border-radius:50%}
:is(.sh-fan,.sh-sheet,.sh-bar) :is(button.sh-chip,button.sh-achip){border-radius:999px}
.sh-sheet button.sh-btn{border-radius:12px}
/* Beer squares any pressed button with !important; keep these round while pressed. */
.sh-fan button.sh-fab:active{border-radius:50%!important}
:is(.sh-sheet,.sh-bar) :is(button.sh-chip,button.sh-achip):active{border-radius:999px!important}

@keyframes sh-fade{from{opacity:0}}
@keyframes sh-up{from{transform:translateY(100%)}}
@keyframes sh-in{from{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  .sh-sheet,.sh-scrim,.sh-fanscrim{animation:none}
  button.sh-fanact,.sh-fabx{transition:none}
}