/* client controls in the Brazen Studios site style: Instrument Sans throughout (self-hosted, ./fonts, OFL),
   small uppercase grey labels, pill buttons (black, or yellow with black text), thin grey borders, 15 px panel radius */
@font-face{ font-family:'Instrument Sans'; font-style:normal; font-weight:400; font-display:swap; src:url(./fonts/InstrumentSans-400.woff2) format('woff2'); }
@font-face{ font-family:'Instrument Sans'; font-style:normal; font-weight:500; font-display:swap; src:url(./fonts/InstrumentSans-500.woff2) format('woff2'); }
:root{ --cs-ink:#111; --cs-mute:#5b5b5b; --cs-line:#dcdcdc; --cs-soft:#F2F2F2; --cs-yellow:#F2E94E; --cs-font:'Instrument Sans', system-ui, sans-serif; --font:'Instrument Sans', system-ui, sans-serif; }
#sitbtn, #light, #pal, #furn, #furntag, #dev, #src, #about, #bottom, #top, #views, #cmp, #vr, #lazynote{ display:none !important; }
#ui{ right:360px !important; }
body{ background:#0d0d0e; }
.mono{ font:400 11px/1 var(--cs-font); text-transform:uppercase; letter-spacing:.04em; color:var(--cs-mute); }
.cs{ position:fixed; top:0; right:0; bottom:0; width:360px; z-index:20; background:#fff; color:var(--cs-ink);
  font:14px/1.45 var(--cs-font); display:flex; flex-direction:column; border-left:1px solid var(--cs-line); }
.cs h1{ font:500 21px/1.2 var(--cs-font); margin:0; letter-spacing:-.01em; }
.cs-head{ padding:18px 20px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cs-more{ display:none; }
.cs-body{ overflow-y:auto; flex:1 1 auto; padding:0 20px; }
.cs-views{ padding:0 20px 6px; }
.cs-sec{ padding:12px 0; border-top:1px solid var(--cs-soft); }
.cs-views.cs-sec{ border-top:0; padding:0 20px 8px; }
.cs [hidden], .qf [hidden]{ display:none !important; }
.cs-lbl{ font:400 13px/1.2 var(--cs-font); text-transform:uppercase; letter-spacing:.04em; color:var(--cs-mute); margin-bottom:8px; }
.cs-seg{ display:flex; flex-wrap:wrap; gap:6px; }
.cs-seg button, .cs-tiles button{ font:500 13px/1.2 var(--cs-font); color:var(--cs-ink); background:#fff; border:1px solid var(--cs-line); border-radius:999px; padding:8px 12px; cursor:pointer; }
.cs-seg button{ flex:1 1 0; min-width:0; white-space:nowrap; padding:8px 4px; }
.cs-seg .sm{ display:none; }
.cs-seg button.wide{ flex-basis:100%; }
.cs-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.cs-tiles button{ text-align:center; line-height:1.15; min-height:36px; }
.cs-seg button[aria-pressed=true], .cs-tiles button[aria-pressed=true]{ background:var(--cs-ink); border-color:var(--cs-ink); color:#fff; }
.cs-seg button[aria-pressed=true] .mono, .cs-tiles button[aria-pressed=true] .mono{ color:#d6d6d6; }
.cs-seg button:focus-visible, .cs-tiles button:focus-visible, .cs-btn:focus-visible, .cs-main:focus-visible{ outline:2px solid #2a62d6; outline-offset:2px; }
.cs-row{ display:flex; gap:10px; align-items:center; margin-top:10px; }
.cs-btn{ font:500 13px/1.2 var(--cs-font); background:#fff; color:var(--cs-ink); border:1px solid var(--cs-ink); border-radius:999px; padding:8px 16px; cursor:pointer; }
.cs-link{ font:13px var(--cs-font); background:none; border:0; color:var(--cs-mute); text-decoration:underline; cursor:pointer; padding:4px; }
.cs-sub{ margin-top:10px; padding-top:10px; border-top:1px solid var(--cs-soft); }
.cs-field{ display:block; font:400 12px/1.3 var(--cs-font); text-transform:uppercase; letter-spacing:.04em; color:var(--cs-mute); margin-top:10px; }
.cs-field input[type=text], .cs-field input[type=email], .cs-field input[type=date], .cs-field select, .cs-field textarea{ display:block; width:100%; box-sizing:border-box; margin-top:4px;
  font:400 14px var(--cs-font); text-transform:none; letter-spacing:normal; color:var(--cs-ink); background:#fff; border:1px solid var(--cs-line); border-radius:10px; padding:8px 10px; }
.cs-field input[type=range]{ display:block; width:100%; margin-top:6px; accent-color:#111; }
.cs-field textarea{ resize:vertical; }
.cs-check{ display:flex; gap:8px; align-items:center; font-weight:500; font-size:13px; margin-top:4px; cursor:pointer; }
.cs-check input{ width:16px; height:16px; accent-color:#111; }
.cs-hint{ font-size:12px; color:var(--cs-mute); margin:8px 0 0; }
.cs-hint:empty{ display:none; }
.cs-msg{ font-size:13px; font-weight:500; color:#a2261b; margin:8px 0 0; }
.cs-msg:empty{ display:none; }
.cs-note{ font-size:12px; color:var(--cs-mute); margin:10px 0 0; }
.cs-foot{ padding:12px 20px 18px; border-top:1px solid var(--cs-line); background:#fff; }
.cs-foot .cs-note{ margin:0 0 10px; }
.cs-main{ display:block; width:100%; font:500 15px/1.2 var(--cs-font); color:#111; background:var(--cs-yellow); border:1px solid var(--cs-yellow); border-radius:999px; padding:13px 18px; cursor:pointer; }
.cs-main:disabled{ background:var(--cs-soft); color:#8a8a8a; border-color:var(--cs-soft); cursor:not-allowed; }
.cs-prices{ margin:0 0 10px; padding:10px 12px; background:var(--cs-soft); border-radius:15px; font-size:13px; }
.cs-prices table{ width:100%; border-collapse:collapse; }
.cs-prices td{ padding:3px 0; }
.cs-prices td.p{ text-align:right; font-family:var(--cs-font); }
.cs-prices .cs-lbl{ margin-bottom:6px; }

/* quote form */
.qf{ position:fixed; inset:0; z-index:40; background:rgba(10,10,12,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.qf[hidden]{ display:none; }
.qf-box{ position:relative; width:min(520px, 100%); max-height:calc(100vh - 32px); overflow-y:auto; background:#fff; color:var(--cs-ink); border-radius:15px;
  padding:24px 24px 22px; font:14px/1.45 var(--cs-font); box-sizing:border-box; }
.qf-box h2{ font:500 22px/1.2 var(--cs-font); margin:0 0 4px; }
.qf-lead{ color:var(--cs-mute); margin:0 0 6px; }
.qf-x{ position:absolute; top:10px; right:12px; font-size:24px; line-height:1; background:none; border:0; cursor:pointer; color:var(--cs-mute); padding:4px 8px; }
.qf-two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.qf-setup{ margin:12px 0 4px; padding:10px 12px; background:var(--cs-soft); border-radius:15px; font-size:13px; }
.qf-setup b{ display:block; font:400 13px/1.2 var(--cs-font); text-transform:uppercase; letter-spacing:.04em; font-weight:400; color:var(--cs-mute); margin-bottom:6px; }
.qf-setup ul{ margin:0; padding-left:18px; }
.qf-consent{ font-size:12px; color:var(--cs-mute); margin:12px 0; }
.qf-consent a{ color:var(--cs-ink); }
.qf-err{ color:#a2261b; font-size:12px; font-weight:500; margin:4px 0 0; }
.qf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
#qf_thanks img{ display:block; width:100%; border-radius:15px; margin:14px 0; background:var(--cs-soft); aspect-ratio:16/9; object-fit:cover; }

/* phones: the picture on top, a strip of views and the quote button below, the rest in a sheet */
@media (max-width:640px){
  #ui{ right:0 !important; bottom:150px !important; }
  #camguide{ right:0 !important; bottom:150px !important; }
  .cs{ top:auto; left:0; width:auto; height:150px; border-left:0; border-top:1px solid var(--cs-line); }
  .cs.open{ height:min(78vh, calc(100vh - 120px)); }
  .cs-head{ padding:8px 14px 4px; }
  .cs h1{ font-size:15px; }
  .cs-more{ display:block; font:500 13px var(--cs-font); background:var(--cs-ink); border:1px solid var(--cs-ink); border-radius:999px; padding:6px 14px; color:#fff; }
  .cs-views.cs-sec{ padding:0 14px 4px; }
  .cs-views .cs-lbl, .cs-views .cs-hint{ display:none; }
  .cs-seg button{ padding:7px 4px; font-size:12px; }
  .cs-views .cs-seg .lg{ display:none; } .cs-views .cs-seg .sm{ display:inline; }
  .cs-views .cs-seg{ flex-wrap:nowrap; }
  .cs-views .cs-seg button.wide{ flex-basis:auto; flex:1.4 1 0; }
  .cs-body{ display:none; padding:0 14px; }
  .cs.open .cs-body{ display:block; }
  .cs-foot{ padding:6px 14px 10px; }
  .cs-foot .cs-note{ display:none; }
  .cs.open .cs-foot .cs-note{ display:block; }
  .cs-main{ padding:10px 12px; font-size:14px; }
  .qf{ padding:0; align-items:stretch; }
  .qf-box{ max-height:100vh; border-radius:0; padding:20px 16px; }
}

/* camera label on the 16:9 guide, and the zoom control, in the site style */
#camguide .tag{ font:500 12px/1.35 var(--cs-font); border-radius:999px; padding:5px 12px; background:rgba(17,17,17,.82); color:#fff; }
#camguide .tag .ax{ font:400 11px var(--cs-font); text-transform:uppercase; letter-spacing:.04em; color:#cfcfcf; }
#zoom{ font-family:var(--cs-font); border-radius:999px; }
#zoom button.v{ border-radius:999px; font-family:var(--cs-font); }
#load h2, #load p{ font-family:var(--cs-font); }

/* inside the studio tour page (?embed=1): the host page draws its own close button at the top right, so nothing of ours sits there */
.cs-embed .cs-head{ padding-right:64px; }
@media (max-width:640px){
  .cs-embed .qf-box{ padding-top:60px; }
  .cs-embed .qf-x{ right:auto; left:8px; }
}