/* Sarv pressables: ONE interaction model for everything that can be pressed, in the world and on the site.
   This file is the only source. A component sets its own --depth (the resting edge: controls 6, small 4, cards 8) and its colours; it never writes its own hover rise or press.
   rest: the hard edge at --depth · hover: rises --sarv-press, the edge grows with it, the border turns --b-hover (a component may set it; the default is clay) · press: sinks --sarv-press, quicker
   disabled and the current page do not respond. .is-down is the press for a control the page holds down itself (the World's walking pad follows the thumb from key to key). Loaded by assets/world/world.css (@import) and by the site bundle (scripts/build-site.mjs). */
:where(.px-btn, .px-tool, .px-plaque, .px-zoom, .px-exhibit, .px-glimpse, .px-cert, .px-choices button, .px-slot, .ias-chatbot-pill, .ias-chatbot-close-btn, .ias-chatbot-chip, .ias-chatbot-followup-chip, .ias-chatbot-send-btn, .sh-tool, .sh-navbtn, .sh-chip, .sh-btn, .sh-cta, .sh-panel-close, .sh-panel-back, .sh-plaque) { --lift: var(--depth, 6px); transition: transform var(--sarv-fast, .12s) ease-out, --lift var(--sarv-fast, .12s) ease-out, color var(--sarv-fast, .12s) ease-out, background-color var(--sarv-fast, .12s) ease-out; }
@media (hover: hover) { :is(.px-btn, .px-tool, .px-plaque, .px-zoom, .px-exhibit, .px-glimpse, .px-cert, .px-choices button, .px-slot, .ias-chatbot-pill, .ias-chatbot-close-btn, .ias-chatbot-chip, .ias-chatbot-followup-chip, .ias-chatbot-send-btn, .sh-tool, .sh-navbtn, .sh-chip, .sh-btn, .sh-cta, .sh-panel-close, .sh-panel-back, .sh-plaque):hover:not(:disabled, [aria-disabled="true"], [aria-current="page"]) { transform: --b: var(--b-hover, var(--sarv-clay)); transform: translateY(calc(var(--sarv-press) * -1)); --lift: calc(var(--depth, 6px) + var(--sarv-press)); } }
:is(.px-btn, .px-tool, .px-plaque, .px-zoom, .px-exhibit, .px-glimpse, .px-cert, .px-choices button, .px-slot, .ias-chatbot-pill, .ias-chatbot-close-btn, .ias-chatbot-chip, .ias-chatbot-followup-chip, .ias-chatbot-send-btn, .sh-tool, .sh-navbtn, .sh-chip, .sh-btn, .sh-cta, .sh-panel-close, .sh-panel-back, .sh-plaque):is(:active, .is-down):not(:disabled, [aria-disabled="true"]) { transform: translateY(var(--sarv-press)); --lift: calc(var(--depth, 6px) - var(--sarv-press)); transition-duration: .08s; }
@media (prefers-reduced-motion: reduce) { :is(.px-btn, .px-tool, .px-plaque, .px-zoom, .px-exhibit, .px-glimpse, .px-cert, .px-choices button, .px-slot, .ias-chatbot-pill, .ias-chatbot-close-btn, .ias-chatbot-chip, .ias-chatbot-followup-chip, .ias-chatbot-send-btn, .sh-tool, .sh-navbtn, .sh-chip, .sh-btn, .sh-cta, .sh-panel-close, .sh-panel-back, .sh-plaque):is(:hover, :active) { transform: none; } }

/* ---- Button: one definition for the site's .px-btn and the world's .sh-btn (surface, sizes, variants, states) ---- */
.px-btn, .sh-btn { --b: var(--sarv-rule); --e: var(--sarv-rule-dark); --depth: 6px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sarv-btn-gap); min-height: var(--sarv-hit); padding: var(--sarv-btn-pad); border: 0; background: var(--sarv-paper-bg); color: var(--sarv-ink); font: var(--sarv-t-button); font-variant-ligatures: none; text-align: center; text-decoration: none; cursor: pointer; position: relative; }
:is(.px-btn, .sh-btn) :is(.px-icon, .sh-icon) { width: var(--sarv-btn-icon); height: var(--sarv-btn-icon); }
:is(.px-btn-primary, .sh-btn-primary) { --b: var(--sarv-edge-primary); --e: var(--sarv-edge-primary-dark); background: var(--sarv-clay-bg); color: var(--sarv-on-clay) !important; }
:is(.px-btn-sm, .sh-btn-sm) { --depth: 4px; min-height: var(--sarv-btn-min-sm); padding: var(--sarv-btn-pad-sm); }
:is(.px-btn-quiet, .sh-btn-quiet) { --b: transparent; --e: transparent; --b-hover: transparent; background: none; text-decoration: underline; text-decoration-color: var(--sarv-rule-dark); text-underline-offset: 6px; padding-inline: var(--sarv-s2); }   /* Quiet: the text-only button (no surface); same height, type and icon as every button */
:is(.px-btn-quiet, .sh-btn-quiet):is(:active, :focus-visible) { color: var(--sarv-clay-dark); text-decoration-color: currentColor; text-decoration-thickness: 2px; }
@media (hover: hover) { :is(.px-btn-quiet, .sh-btn-quiet):hover { color: var(--sarv-clay-dark); text-decoration-color: currentColor; text-decoration-thickness: 2px; } }   /* no frame (it sets --b-hover); it rises and presses like every button (pressables above) */
:is(.px-btn, .sh-btn):is(:disabled, [aria-disabled="true"]) { opacity: var(--sarv-disabled); cursor: default; pointer-events: none; }
:is(.px-btn, .sh-btn)[aria-busy="true"] { cursor: progress; pointer-events: none; transform: translateY(var(--sarv-press)); --lift: calc(var(--depth, 6px) - var(--sarv-press)); }   /* busy: it stays pressed in while it works; the caller swaps its label (booking.js: "Booking…") */
:is(.px-btn, .sh-btn)[aria-busy="true"]::after { content: ""; width: 8px; height: 8px; background: currentColor; animation: sarv-blink .8s steps(2) infinite; }
@keyframes sarv-blink { 50% { opacity: .2; } }

/* Tool on: a toolbar tool that has opened something (Ask Nour, the sound panel, the menu) is wood with a brass edge and parchment ink, so which one is open reads at a glance.
   The state is aria-expanded, never colour alone. The day/night switch is a theme, not an open tool: it keeps its own night look. */
.sh-tool[aria-expanded="true"]:not(.sh-time) { --b: var(--sarv-tool-on-edge); --e: var(--sarv-wood-edge-dark); background: var(--sarv-tool-on-bg); color: var(--sarv-tool-on-ink); }