/* Burlington Tile design language: gold + gunmetal PICTURE buttons for the shower cutaway controls (Oct 29, 2026).
   CSS only. Restyles existing ids/classes from cutaway.js; no logic, ids or markup changed. Load AFTER cutaway-colors.css.
   Faces = 3-slice brushed-metal pictures (left cap / stretched middle / right cap), clipped by border-radius; text stays live HTML.
   Gold = primary actions (black ink #14110a, contrast 5.8-11.4:1). Gunmetal = inactive mode tabs + Back/Next.
   Dark-glass panels (#finBar, .bar) stay behind the buttons. EXPLODE slider, peel/tile swatch strip, pins, Go curbless and Fixtures untouched. */
:root{
  --cg-ink:#14110a;--cg-gun-ink:#eceff2;--cg-ring:#f6e3b0;
  --cg-gold:url(/images/buttons/gold-01-left.png) left center/auto 100% no-repeat,url(/images/buttons/gold-01-right.png) right center/auto 100% no-repeat,url(/images/buttons/gold-01-mid.png) center/100% 100% no-repeat;
  --cg-gold-w:image-set(url(/images/buttons/gold-01-left.webp) type('image/webp'),url(/images/buttons/gold-01-left.png) type('image/png')) left center/auto 100% no-repeat,image-set(url(/images/buttons/gold-01-right.webp) type('image/webp'),url(/images/buttons/gold-01-right.png) type('image/png')) right center/auto 100% no-repeat,image-set(url(/images/buttons/gold-01-mid.webp) type('image/webp'),url(/images/buttons/gold-01-mid.png) type('image/png')) center/100% 100% no-repeat;
  --cg-gun:url(/images/buttons/gunmetal-02-left.png) left center/auto 100% no-repeat,url(/images/buttons/gunmetal-02-right.png) right center/auto 100% no-repeat,url(/images/buttons/gunmetal-02-mid.png) center/100% 100% no-repeat;
  --cg-gun-w:image-set(url(/images/buttons/gunmetal-02-left.webp) type('image/webp'),url(/images/buttons/gunmetal-02-left.png) type('image/png')) left center/auto 100% no-repeat,image-set(url(/images/buttons/gunmetal-02-right.webp) type('image/webp'),url(/images/buttons/gunmetal-02-right.png) type('image/png')) right center/auto 100% no-repeat,image-set(url(/images/buttons/gunmetal-02-mid.webp) type('image/webp'),url(/images/buttons/gunmetal-02-mid.png) type('image/png')) center/100% 100% no-repeat;
}
/* ---- GOLD primary ---- */
html body #viewer :is(#play,#tourBtn,#finBtn,#indexBtn,#fsBtn,#flavorBtn,#tiltBtn,#introCta,#tourCta),
html body #viewer #finBar #ledBtn,
html body #viewer #finBar .fin-tabs button[aria-selected=true]{
  background:var(--cg-gold)!important;background:var(--cg-gold-w)!important;
  color:var(--cg-ink)!important;text-shadow:0 1px 0 rgba(255,240,200,.55)!important;
  border:0!important;border-radius:999px!important;box-shadow:0 2px 6px rgba(0,0,0,.45)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  font-family:'MT Lato','Lato',system-ui,sans-serif!important;font-weight:700!important;letter-spacing:.02em!important;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:filter .18s,transform .12s,box-shadow .18s!important;filter:none;
}
/* ---- GUNMETAL quiet (inactive mode tabs, Back / Next) ---- */
html body #viewer #finBar .fin-tabs button:not([aria-selected=true]),
html body #viewer .bar :is(#prev,#next){
  background:var(--cg-gun)!important;background:var(--cg-gun-w)!important;
  color:var(--cg-gun-ink)!important;text-shadow:0 -1px 0 rgba(0,0,0,.55)!important;
  border:0!important;border-radius:999px!important;box-shadow:0 1px 4px rgba(0,0,0,.4)!important;
  font-family:'MT Lato','Lato',system-ui,sans-serif!important;font-weight:700!important;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:filter .18s,transform .12s!important;
}
/* sizes: step bar keeps its footprint (tap area already 44px via the existing ::after) */
html body #viewer .bar :is(#play,#tourBtn,#indexBtn,#prev,#next){min-height:38px;padding:0 14px!important;line-height:1}
html body #viewer .bar #finBtn{min-height:44px;padding:0 16px!important}
html body #viewer #fsBtn{min-height:44px;padding:0 16px!important}
html body #viewer #fsBtn svg{color:var(--cg-ink)}
html body #viewer :is(#introCta,#tourCta){min-height:46px;padding:0 24px!important;font-size:15px!important}
html body #viewer #finBar .fin-tabs{gap:3px;padding:3px!important;background:rgba(0,0,0,.35)!important;border:1px solid rgba(226,196,135,.35)!important}
html body #viewer #finBar .fin-tabs button{min-height:32px;padding:0 12px!important;font-size:12px!important;line-height:1}
html body #viewer #finBar .fin-tabs button[aria-selected=true]{box-shadow:0 0 0 1px rgba(20,17,10,.6),0 2px 6px rgba(0,0,0,.5)!important}
html body #viewer #finBar :is(#flavorBtn,#ledBtn,#tiltBtn){min-height:44px;padding:0 16px!important}
html body #viewer #finBar #ledBtn .lb-dot{box-shadow:0 0 0 1.5px rgba(20,17,10,.55)!important}
/* hover / pressed / focus / on-states */
@media (hover:hover){
  html body #viewer :is(#play,#tourBtn,#finBtn,#indexBtn,#fsBtn,#flavorBtn,#tiltBtn,#introCta,#tourCta,#finBar #ledBtn,#finBar .fin-tabs button,.bar #prev,.bar #next):hover:not(:disabled){filter:brightness(1.09) saturate(1.06)}
  html body #viewer :is(#play,#tourBtn,#finBtn,#indexBtn,#fsBtn,#flavorBtn,#tiltBtn,#introCta,#tourCta,#finBar #ledBtn,#finBar .fin-tabs button[aria-selected=true]):hover:not(:disabled){color:var(--cg-ink)!important}
  html body #viewer :is(#finBar .fin-tabs button:not([aria-selected=true]),.bar #prev,.bar #next):hover:not(:disabled){color:#fff!important}
}
html body #viewer :is(#play,#tourBtn,#finBtn,#indexBtn,#fsBtn,#flavorBtn,#tiltBtn,#introCta,#tourCta,#finBar #ledBtn,#finBar .fin-tabs button,.bar #prev,.bar #next):active:not(:disabled){filter:brightness(.86);transform:translateY(1px)}
/* "on" look: playing, index pinned, tilt on, chooser/LED panel open */
html body #viewer :is(#play.on,#indexBtn.pinned,#tiltBtn[aria-pressed=true],#flavorBtn[aria-expanded=true],#finBar #ledBtn[aria-expanded=true],#finBar #ledBtn.open){
  filter:brightness(.9) saturate(1.1);box-shadow:inset 0 2px 5px rgba(20,17,10,.55),0 0 0 2px var(--cg-ring)!important}
html body #viewer :is(#play,#tourBtn,#finBtn,#indexBtn,#fsBtn,#flavorBtn,#tiltBtn,#introCta,#tourCta,#finBar #ledBtn,#finBar .fin-tabs button,.bar #prev,.bar #next):focus-visible{
  outline:3px solid var(--cg-ring)!important;outline-offset:2px!important}
html body #viewer .bar :is(#prev,#next):disabled{opacity:.38!important;filter:grayscale(.4);cursor:default}
@media (prefers-reduced-motion:reduce){html body #viewer :is(#play,#tourBtn,#finBtn,#indexBtn,#fsBtn,#flavorBtn,#tiltBtn,#introCta,#tourCta,#finBar #ledBtn,#finBar .fin-tabs button,.bar #prev,.bar #next){transition:none!important;transform:none!important}}
/* phones: same footprint as before, slightly smaller faces */
@media (max-width:600px){
  html body #viewer .bar :is(#play,#tourBtn,#indexBtn){min-height:34px;padding:0 12px!important;font-size:12.5px!important}
  html body #viewer .bar :is(#prev,#next){min-height:34px;min-width:34px;padding:0 6px!important}
  html body #viewer .bar #finBtn{padding:0 14px!important;font-size:12.5px!important}
  html body #viewer #finBar .fin-tabs button{min-height:30px;padding:0 9px!important;font-size:11.5px!important}
  html body #viewer #finBar :is(#flavorBtn,#ledBtn,#tiltBtn){padding:0 13px!important;font-size:13px!important}
  html body #viewer #fsBtn{padding:0 13px!important}
}
/* desktop: keep the step bar as narrow as before so the step name keeps its room */
@media (min-width:601px){
  html body #viewer .bar :is(#play,#tourBtn,#indexBtn,#prev,#next){padding:0 11px!important;letter-spacing:0!important}
  html body #viewer .bar #finBtn{padding:0 12px!important;letter-spacing:0!important}
}
/* phones: Full screen sat on top of the Finishes panel (Tilt). Lift it into the free strip above the panel. */
@media (max-width:600px){html body #viewer:not(.intro) #fsBtn{top:0!important}}
/* full-screen exit button matches */
html body #fsExit:not([hidden]){background:var(--cg-gold)!important;background:var(--cg-gold-w)!important;color:var(--cg-ink)!important;text-shadow:0 1px 0 rgba(255,240,200,.55)!important;border:0!important;border-radius:999px!important;box-shadow:0 2px 8px rgba(0,0,0,.5)!important;min-height:44px;padding:0 18px!important;font-weight:700!important}
html body #fsExit:focus-visible{outline:3px solid var(--cg-ring)!important;outline-offset:2px!important}
/* ===== Nov 3, 2026 (Mike): "silver buttons should be gold, we made some circle ones" =====
   All sizes: Back/Next, Go curbless and the numbered pins switch from gunmetal/silver to the gold picture face.
   Circles = the gold-01 left + right caps meeting with no middle (same art as the gold pills). */
html body #viewer .bar :is(#prev,#next),
html body #viewer .bar #curbBtn{
  background:var(--cg-gold)!important;background:var(--cg-gold-w)!important;
  color:var(--cg-ink)!important;text-shadow:0 1px 0 rgba(255,240,200,.55)!important;
  border:0!important;border-radius:999px!important;box-shadow:0 2px 6px rgba(0,0,0,.45)!important;
  font-family:'MT Lato','Lato',system-ui,sans-serif!important;font-weight:700!important}
html body #viewer .bar #curbBtn span{color:var(--cg-ink)!important}
html body #viewer .bar #curbBtn i{border-color:var(--cg-ink)!important;background:rgba(255,248,225,.9)!important}
html body #viewer .bar #curbBtn.on{filter:brightness(.9) saturate(1.1);box-shadow:inset 0 2px 5px rgba(20,17,10,.55),0 0 0 2px var(--cg-ring)!important}
html body #viewer .bar #curbBtn.on i{background:var(--cg-ink)!important;box-shadow:inset 0 0 0 3px #f6e3b0!important;border-color:var(--cg-ink)!important}
html body #viewer .bar #curbBtn:focus-visible{outline:3px solid var(--cg-ring)!important;outline-offset:2px!important}
@media (hover:hover){html body #viewer .bar :is(#prev,#next,#curbBtn):hover:not(:disabled){color:var(--cg-ink)!important;filter:brightness(1.09) saturate(1.06)}}
html body #viewer .pin b{
  background:url(/images/buttons/gold-01-left.png) left center/auto 100% no-repeat,url(/images/buttons/gold-01-right.png) right center/auto 100% no-repeat!important;
  background:image-set(url(/images/buttons/gold-01-left.webp) type('image/webp'),url(/images/buttons/gold-01-left.png) type('image/png')) left center/auto 100% no-repeat,image-set(url(/images/buttons/gold-01-right.webp) type('image/webp'),url(/images/buttons/gold-01-right.png) type('image/png')) right center/auto 100% no-repeat!important;
  color:var(--cg-ink)!important;border:0!important;text-shadow:0 1px 0 rgba(255,240,200,.55);
  box-shadow:0 1.5px 4px rgba(0,0,0,.45)!important}
html body #viewer .pin:hover b,html body #viewer .pin.on b{filter:brightness(1.08);box-shadow:0 2px 6px rgba(0,0,0,.5),0 0 0 3px rgba(246,227,176,.8)!important}
/* ===== Nov 3, 2026 (Mike): phones only. Smaller gold buttons, three to a row; LED pop-up = clearer glass docked low ===== */
@media (max-width:600px){
  /* row 1: Back · step name · Next (gold circles) */
  html body #viewer .bar{row-gap:6px!important}
  html body #viewer .bar :is(#prev,#next){width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;font-size:15px!important;flex:none!important}
  html body #viewer .bar .stepinfo{flex:1 1 calc(100% - 100px)!important;min-width:0}
  /* row 2: Build it · Tour · Index (three equal) */
  html body #viewer .bar :is(#play,#tourBtn,#indexBtn){order:2;flex:0 0 calc((100% - 12px) / 3)!important;min-width:0;min-height:40px!important;height:40px;padding:0 8px!important;font-size:12px!important;white-space:nowrap}
  /* row 3: Reset finished shower · Go curbless */
  html body #viewer .bar #finBtn{order:3;flex:0 0 calc((100% - 6px) * .56)!important;min-width:0;min-height:40px!important;height:40px;padding:0 8px!important;font-size:11.5px!important;white-space:nowrap;letter-spacing:0!important}
  html body #viewer .bar #curbBtn{order:3!important;flex:0 0 calc((100% - 6px) * .44)!important;min-width:0;min-height:40px!important;height:40px;margin-top:0!important;padding:0 8px!important;font-size:11px!important;gap:6px!important;letter-spacing:.03em!important;white-space:nowrap}
  html body #viewer .bar #curbBtn i{width:14px;height:14px}
  html body #viewer .bar .ex{order:10;min-height:36px!important}
  html body #viewer .bar .ex input{height:36px!important}
  /* LED pop-up: lighter glass, docked just above the control card (off the shower body, never over the controls) */
  html body #viewer #ledMod{background:rgba(18,16,14,.24)!important;-webkit-backdrop-filter:blur(5px) saturate(1.3)!important;backdrop-filter:blur(5px) saturate(1.3)!important}
  html body #viewer #ledMod.manual{top:auto!important;bottom:208px!important;left:8px!important;right:40px!important;flex-wrap:nowrap!important;align-items:center!important;padding:6px 26px 6px 8px!important}
  html body #viewer #ledMod :is(.lm-brand,.lm-bl,.lm-mt,.lm-party span){text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 6px rgba(0,0,0,.6)!important}
  html body #viewer #ledMod.manual .lm-extra{display:flex!important;flex:1 1 auto;min-width:0;align-items:center;gap:6px;margin:0!important}
  html body #viewer #ledMod.manual .lm-bl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  html body #viewer #ledMod.manual .lm-bright{flex:1 1 auto;min-width:50px;height:40px}
  html body #viewer #ledMod.manual .lm-party{flex:none;min-height:40px;width:40px;padding:0;background:rgba(0,0,0,.35)!important}
  html body #viewer #ledMod.manual .lm-party span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  html body #viewer #ledMod.manual .lm-x{width:24px;height:24px;font-size:18px;color:#fff!important;text-shadow:0 1px 2px #000}
}
/* desktop: the gold face drops the old 2px outline; pad it back so the step bar keeps its exact layout */
@media (min-width:601px){html body #viewer .bar #curbBtn{padding:0 18px 0 14px!important}}