/* 00 · persistent office equipment: the switches, the lift button, the now-serving note, the walkers. */

/* the volume: a drawn wall plate, top left, and a knob that turns */
.volume { position: fixed; z-index: 41; left: 1.25rem; top: 1.25rem; width: 3.4rem; aspect-ratio: 770 / 727; padding: 0; background: none; }
.volume__plate { position: absolute; inset: 0; width: 100%; height: 100%; }
.volume__knob { position: absolute; left: 51.61%; top: 48.98%; width: 39.36%; height: auto; translate: -50% -50%; rotate: 150deg; transition: rotate 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.volume.is-on .volume__knob { rotate: 0deg; }
.volume__tick { position: absolute; left: 58.64%; top: 77.18%; width: 1.3%; height: 4.13%; translate: -50% -50%; background: var(--canton); box-shadow: 0 0 0 1px rgba(16, 17, 15, 0.35); opacity: 1; transition: left 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s; }
.volume:not(.is-on) .volume__tick { left: 40.44%; opacity: 0.55; }
.volume:hover .volume__knob { scale: 1.04; }
html[data-lights="off"] .volume__plate, html[data-lights="off"] .volume__knob, html[data-night="on"] .volume__plate, html[data-night="on"] .volume__knob, html[data-night="on"] .qx-switch img { filter: invert(1) hue-rotate(180deg); }
.qx-switch__label { display: none !important; }
body.is-gated .lift, body.is-gated .walkers { display: none; }

/* the lift: the drawn call plate, bottom right; the two buttons are hotspots on it */
.lift { position: fixed; z-index: 41; right: 1.25rem; bottom: 1.5rem; width: 3.6rem; aspect-ratio: 655 / 643; opacity: 0; transform: translateY(0.75rem); transition: opacity 0.3s, transform 0.3s var(--settle); pointer-events: none; }
.lift.is-on { opacity: 1; transform: none; pointer-events: auto; }
.lift__plate { position: absolute; inset: 0; width: 100%; height: 100%; }
.lift__btn { position: absolute; left: 24%; width: 52%; height: 33%; border-radius: 50%; }
.lift__btn--up { top: 12%; } .lift__btn--down { top: 55%; }
.lift__btn:hover, .lift__btn.is-lit { box-shadow: 0 0 0 3px var(--canton); background: color-mix(in srgb, var(--canton) 55%, transparent); }
.lift__btn:active { transform: scale(0.94); }
html[data-lights="off"] .lift__plate { filter: invert(1) hue-rotate(180deg); }

/* now serving: a pale yellow note stuck at the top of the page */
.serving { position: fixed; z-index: 40; left: 50%; top: 0.9rem; translate: -50% -160%; rotate: -1.5deg; display: grid; gap: 0.3rem; padding: 0.8rem 1.4rem 0.9rem; background: var(--canton); color: #10110f; box-shadow: 0 14px 24px -18px rgba(16, 17, 15, 0.55); transition: translate 0.55s var(--settle); white-space: nowrap; text-align: center; }
.serving.is-on { translate: -50% 0; }
.serving::before { content: ""; position: absolute; left: 50%; top: -0.45rem; width: 3.2rem; height: 0.9rem; translate: -50% 0; rotate: 2deg; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 1px rgba(16, 17, 15, 0.12); }
.serving span { font: 600 var(--label)/1 var(--sans); letter-spacing: 0.055em; text-transform: uppercase; color: #10110f; opacity: 0.7; }
.serving b { font-size: clamp(1rem, 1.8vw, 1.25rem); letter-spacing: 0.04em; }
body.is-gated .serving { display: none; }

/* the ink pad, bottom left, with a little room under it */
body .qx-pad { left: 1.25rem; bottom: 1.5rem; width: 5.2rem; }
/* Form 15-C sits left of the lift, not on it */
.qx-form { right: 5.6rem; }

/* scrollbars: the thumb in the accent with an ink edge so it reads on white. The page's own is wide enough to see and
   grab at a glance, on a paper track with a hairline; boxes that scroll inside keep a slim one.
   (Chrome drops the ::-webkit-scrollbar styles when scrollbar-width or -color is set, so those are for Firefox only) */
@supports not selector(::-webkit-scrollbar) { html { scrollbar-width: auto; scrollbar-color: var(--ink) var(--paper); } }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--canton); border-radius: 0; border: 2px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 55%, transparent); }
::-webkit-scrollbar-thumb:hover { background: var(--canton); background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--ink); }
/* the page's: Chrome takes the window's scrollbar from body, others from html */
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 15px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: var(--paper); box-shadow: inset 1px 0 0 var(--gray-line); }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { min-height: 4rem; border: 3px solid transparent; box-shadow: inset 0 0 0 2px var(--ink); }
html::-webkit-scrollbar-thumb:hover, html::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:active { background: var(--ink); background-clip: padding-box; box-shadow: none; }

@media (max-width: 880px) {
  .volume { left: 0.75rem; top: 0.75rem; width: 2.7rem; }
  .qx-switch { width: 2.6rem; right: 0.75rem; top: 0.75rem; }
  .qx-switch__label { display: none; }
  .serving { top: 0.6rem; padding: 0.45rem 0.8rem 0.5rem; gap: 0.1rem; max-width: calc(100vw - 8rem); }
  .serving b { font-size: 0.9rem; }
  .serving::before { display: none; }
  .lift { right: 0.75rem; bottom: 1rem; width: 2.9rem; }
  body .qx-pad { bottom: 1rem; left: 0.75rem; width: 3.4rem; }
  .qx-pad__label { display: none; }
  .qx-form { right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lift { transition: none; }
}