/* Guest surface: the venue is the brand;
RestoDesk stays behind the service. */
@import url("/staff/styles.css");
#app{
  max-width:680px
}
.top{
  padding-top:16px
}
.top .venue{
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase
}
.top .who{
  font:400 clamp(32px,6vw,42px)/1.12 var(--font-editorial);
  letter-spacing:-.035em;
  color:var(--text);
  margin:14px 0 4px
}
.tabs{
  gap:24px;
  position:sticky;
  top:calc(var(--safe-top) + var(--content-top));
  z-index:2;
  background:var(--bg);
  padding-top:8px;
  margin-bottom:24px
}
.tab{
  font-size:13px
}
button.primary,button.danger{
  width:100%;
  margin:16px 0 12px
}
.panel h2{
  font:400 clamp(24px,4.4vw,30px)/1.2 var(--font-editorial);
  margin-bottom:12px
}
.panel h3{
  margin-top:32px
}
.kv{
  margin:24px 0 0;
  border-top:1px solid var(--line)
}
.kv .row{
  min-height:56px
}
.list .item{
  padding:22px 0
}
.item .reply{
  font-size:14px
}
.panel>.row{
  align-items:center;
  border-block:1px solid var(--line);
  padding:16px 0
}
.panel>.row .hint{
  margin-bottom:0
}
.switch{
  width:56px;
  height:44px;
  min-width:56px;
  position:relative;
  margin:0;
  flex:0 0 56px
}
.switch input{
  position:absolute;
  inset:0;
  width:56px;
  height:44px;
  opacity:0;
  cursor:pointer;
  z-index:2
}
.switch span{
  position:absolute;
  left:0;
  right:0;
  top:8px;
  height:28px;
  border:1px solid var(--control);
  border-radius:20px;
  background:var(--neutral-soft)
}
.switch span::after{
  content:'';
  position:absolute;
  left:3px;
  top:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--neutral);
  transition:transform var(--duration)
}
.switch input:checked+span{
  background:var(--accent);
  border-color:var(--accent)
}
.switch input:checked+span::after{
  transform:translateX(28px);
  background:var(--on-accent)
}
.switch input:focus-visible+span{
  outline:3px solid var(--accent);
  outline-offset:4px
}
.boot{
  margin-top:20px
}
@media(max-width:600px){
  body{
    padding-inline:20px
  }
  .tabs{
    gap:22px
  }
  .kv .row{
    font-size:14px
  }
  .kv .row b{
    max-width:52%;
    text-align:right
  }
  .hint{
    font-size:13px
  }
  .top{
    padding-top:12px
  }
}