/* Buttons + nav: "Refined sticker" (client pick 9 Oct, direction 1 of Design/variations/2026-10-09-nav-buttons/).
   Loaded last so it wins over style.css and the section CSS. Same colours and functions; only the sticker is refined:
   1.5px outlines, a 3px offset shadow that compresses on press (the button travels 2px), no hover movement,
   a lit switch thumb, tighter type, a 2px ink focus ring. In-product UI (phone apps, booth PRINT key, LCD keys) is untouched. */
:root {
  --b-line: 1.5px solid var(--ink);
  --b-sh: 0 3px 0 var(--ink);
  --b-sh-hover: 0 3px 0 var(--ink), 0 10px 18px -10px rgba(16, 22, 52, .45);
  --b-sh-press: 0 1px 0 var(--ink);
  --b-ease: cubic-bezier(.3, .7, .4, 1);
}

/* ---------- Page buttons (.btn and its variants) ---------- */
.btn, #spin .bk-field .btn {
  border: var(--b-line); box-shadow: var(--b-sh); font-weight: 700; letter-spacing: -.015em;
  transition: transform 160ms var(--b-ease), box-shadow 160ms var(--b-ease), background-color 160ms;
}
.btn:hover, #spin .bk-field .btn:hover { transform: none; box-shadow: var(--b-sh-hover); }
.btn:active, #spin .bk-field .btn:active { transform: translateY(2px); box-shadow: var(--b-sh-press); transition-duration: 60ms; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r-pill); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--cotton); color: rgba(16, 22, 52, .42); border-color: rgba(16, 22, 52, .28); box-shadow: none; transform: none; cursor: not-allowed; }

/* header CTA gets the arrow from the chosen direction (drawn with a mask so it follows the text colour) */
.top__cta::after {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.top__cta { gap: 8px; }

/* ---------- Play | Advertise switch ---------- */
.switch { padding: 3px; border: var(--b-line); box-shadow: 0 2px 0 var(--ink); }
.switch__btn { min-height: 44px; letter-spacing: -.015em; transition: color var(--d-base), background-color var(--d-quick); }
.switch__btn[aria-selected="false"]:hover { background: var(--cotton); }
.switch__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.switch__thumb { top: 3px; bottom: 3px; border-width: 1.5px; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(16, 22, 52, .14); }

/* ---------- Header speaker (sound.css) ---------- */
.llsnd { border: 1.5px solid transparent; transition: background-color var(--d-quick) var(--ease-out), border-color var(--d-quick); }
.llsnd:hover { background: var(--cotton); border-color: var(--ink); }
.llsnd:active { background: #E8E5DC; }
.llsnd:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Section buttons that share the sticker pill ---------- */
/* P2 booth: chips and the sound toggle (the PRINT key stays as the booth's own machine key) */
#spin .bk-chip { border-width: 1.5px; letter-spacing: -.01em; transition: background-color 160ms, box-shadow 160ms var(--b-ease), transform 160ms var(--b-ease); }
#spin .bk-chip:hover:not(.on):not([aria-pressed="true"]) { transform: none; box-shadow: var(--b-sh); }
#spin .bk-chip:active { box-shadow: var(--b-sh-press); }
#spin .bk-chip:focus-visible { outline-width: 2px; }
#spin .sound { border-width: 1.5px; box-shadow: var(--b-sh); transition: transform 160ms var(--b-ease), box-shadow 160ms var(--b-ease), background-color 160ms; }
#spin .sound:hover { box-shadow: var(--b-sh-hover); }
#spin .sound:active { transform: translateY(2px); box-shadow: var(--b-sh-press); transition-duration: 60ms; }
/* P6 climb: billboard arrows */
#climb .bb-arr { border-width: 1.5px; box-shadow: var(--b-sh); transition: transform 160ms var(--b-ease), box-shadow 160ms var(--b-ease), background-color 160ms; }
#climb .bb-arr:hover:not(:disabled) { background: #F2B42A; box-shadow: var(--b-sh-hover); }
#climb .bb-arr:active:not(:disabled) { transform: translateY(2px); box-shadow: var(--b-sh-press); transition-duration: 60ms; }
#climb .bb-arr:disabled { box-shadow: none; }
#climb .bb-arr:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* footer play button */
.ft-play { border: var(--b-line); box-shadow: var(--b-sh); letter-spacing: -.015em; transition: transform 160ms var(--b-ease), box-shadow 160ms var(--b-ease), background-color 160ms; }
.ft-play:hover { box-shadow: var(--b-sh-hover); }
.ft-play:active { transform: translateY(2px); box-shadow: var(--b-sh-press); transition-duration: 60ms; }
.ft-play:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r-pill); }
/* B-side billboard controls (brands.css, overridden from here) */
#side-advertise .bd-bill__ctl { border-width: 1.5px; letter-spacing: -.01em; }
#side-advertise .bd-bill__ctl:active { background: #F6DDA0; }
#side-advertise .bd-bill__ctl:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .btn:active, #spin .bk-field .btn:active, #spin .sound:active, #climb .bb-arr:active:not(:disabled), .ft-play:active { transform: none; }
}

/* client 9 Oct: on phones the header was all green (switch thumb + CTA). Make the main CTA ink so the green reads as "selected", not everywhere. */
@media (max-width: 760px) {
  .top .top__cta, .top .top__cta.btn--green, .top .top__cta.btn--gold { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .top .top__cta:hover { background: #222a55; }
}

/* client 9 Oct: no visible caption above the B1 board; the h1 stays for screen readers/SEO via its aria-label */
#h-bhero .bd-cap__t { display: none !important; }

/* client 9 Oct: header logo = bare gold crown, no tile */
.top .brand__mark { width: auto; height: 30px; border-radius: 0; background: none; box-shadow: none; }
@media (max-width: 600px) { .top .brand__mark { height: 26px; } }