/* The page controls on every page that frames an artwork: the way back to the collection, sound
   and full screen, in plain words. The artwork files are never touched; this sits on top of the
   frame. Position is set per page with --home-top (Megeve keeps its own chip clear). */
.fbar{position:fixed;z-index:6;top:calc(var(--home-top,12px) + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);
  display:flex;gap:2px;opacity:0;pointer-events:none;transition:opacity .8s ease}
.fbar.show{opacity:1;pointer-events:auto}
.fb{display:inline-flex;align-items:center;gap:7px;min-height:34px;margin:0;padding:7px 13px;border:0;border-left:2px solid #edbb68;border-radius:0;
  font:12px/1.4 "Courier New",Courier,ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  color:rgba(238,244,246,.9);background:rgba(11,23,36,.72);text-decoration:none;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:color .2s ease,background .2s ease}
.fb+.fb{border-left-color:rgba(238,244,246,.18)}
.fb:hover,.fb:focus-visible{color:#fff;background:rgba(11,23,36,.94)}
.fb:focus-visible{outline:2px solid #edbb68;outline-offset:1px}
.fb[hidden]{display:none}
.fb .s{display:none}
/* Collect: gold when the work has a live listing, quiet when it only links to its Manifold page. */
.fb-collect .ar{opacity:.7}
.fb-collect.is-listed{color:#edbb68;border-left-color:#edbb68}
.fb-collect.is-listed .ar{opacity:1}
.fb .dot{width:8px;height:8px;border-radius:50%;background:rgba(238,244,246,.45)}
.fb-sound[aria-pressed=true] .dot{background:#edbb68}
/* phones: short words, top right, clear of the artwork's own Show controls chip at top left */
@media(max-width:560px){
  .fbar{left:auto;right:calc(8px + env(safe-area-inset-right,0px));transform:none}
  .fb{padding:7px 9px;font-size:11px;letter-spacing:.04em;gap:5px;min-height:36px}
  .fb .l,.fb .x{display:none}
  .fb .s{display:inline}
  .fb-scenes{display:none}
  .fb-collect .ar{display:none}
  .fb-collect:not(.is-listed){display:none}   /* nothing to bid on: leave the phone bar as it was */
}
/* very narrow phones: the artwork's own chip needs the room */
@media(max-width:359px){.fb-collect{display:none}}
@media(prefers-reduced-motion:reduce){.fbar,.fb{transition:none}}