/* Floating tabs, with a single disclosure surface at a time. */
#titlecard .hud-handle { font-size: 11px; }
.side-drawer.left,
.side-drawer.right {
  top: 76px;
  bottom: 76px;
  width: min(360px, calc(100vw - 16px));
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  transform: none;
  transition: none;
}
.side-drawer.left.collapsed,
.side-drawer.right.collapsed {
  top: 50%;
  bottom: auto;
  width: 44px;
  height: 0;
  transform: none;
}
.side-drawer .drawer-handle {
  position: fixed;
  top: 50%;
  width: 44px;
  min-height: 96px;
  font-size: 11px;
  pointer-events: auto;
  transform: translateY(-50%);
}
.side-drawer.left .drawer-handle { left: 0; right: auto; }
.side-drawer.right .drawer-handle { right: 0; left: auto; }
.side-drawer .drawer-inner {
  position: absolute;
  inset: 0 0 auto;
  height: auto;
  max-height: 100%;
  padding: 18px;
  background: rgba(14,16,18,.94);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  pointer-events: auto;
  overflow: auto;
  overscroll-behavior: contain;
}
.side-drawer.left .drawer-inner { left: 48px; padding: 18px; }
.side-drawer.right .drawer-inner { right: 48px; padding: 18px; }
.side-drawer.collapsed .drawer-inner { display: none; }
.side-drawer .btns button { min-height: 44px; font-size: 12px; line-height: 1.4; }
.side-drawer .grp-label { font-size: 11px; opacity: .8; }

/* While a panel is open, keep its close tab, not partial tabs behind it. */
body[data-hud-panel]:not([data-hud-panel=""]) .side-drawer .drawer-handle,
body[data-hud-panel]:not([data-hud-panel=""]) #panel-handle {
  visibility: hidden;
  pointer-events: none;
}
body[data-hud-panel="views"] #views-handle,
body[data-hud-panel="plan"] #plan-handle,
body[data-hud-panel="panel"] #panel #panel-handle {
  visibility: visible;
  pointer-events: auto;
}

#panel,
#panel.collapsed {
  left: 50%;
  right: auto;
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(460px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 96px);
  transform: translateX(-50%);
  z-index: 40;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(14,16,18,.94);
  transition: none;
}
#panel.collapsed {
  width: max-content;
  max-width: calc(100vw - 24px);
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}
#panel .drawer-handle {
  position: static;
  display: block;
  width: max-content;
  min-height: 44px;
  font-size: 11px;
  margin: 0 auto;
  padding: 10px 18px;
  transform: none;
  writing-mode: horizontal-tb;
  border-radius: 8px;
  pointer-events: auto;
}
#panel .drawer-inner {
  min-width: 0;
  padding: 14px 16px 16px;
  max-height: min(55dvh, 440px);
  overflow: auto;
  overscroll-behavior: contain;
}
#panel.collapsed .drawer-inner { display: none; }
#panel label.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  margin: 0 0 12px;
  min-width: 0;
}
#panel label.row > span, #panel label.row > em {
  margin: 0;
  opacity: .9;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}
#panel label.row > em { grid-column: 2; grid-row: 1; }
#panel input[type=range] {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  height: 32px;
  margin: 0;
  background: transparent;
}
#panel input[type=range]::-webkit-slider-runnable-track { height: 3px; background: rgba(255,255,255,.25); }
#panel input[type=range]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6.5px; }
#panel input[type=range]::-moz-range-track { height: 3px; background: rgba(255,255,255,.25); }
#panel input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border: 0; background: #2e7def; }
#panel .row.toggles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0 0 12px;
}
#panel .toggles button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: normal;
  white-space: normal;
  overflow-wrap: anywhere;
  opacity: .8;
}
#panel .toggles button.on { opacity: 1; }
#panel .hint { font-size: 11px; line-height: 1.5; letter-spacing: normal; text-transform: none; opacity: .7; }

#titlecard .title-body, #service {
  position: fixed;
  top: 76px;
  left: 16px;
  right: auto;
  bottom: auto;
  width: min(360px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 100px);
  margin: 0;
  padding: 20px;
  overflow: auto;
  overscroll-behavior: contain;
  background: rgba(14,16,18,.96);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  animation: none;
  z-index: 45;
}
#titlecard p { font-size: 14px; line-height: 1.6; opacity: .9; }
#titlecard .meta { flex-wrap: wrap; gap: 10px 14px; font-size: 11px; opacity: .75; letter-spacing: normal; }
#service[hidden] { display: none; }
#service .sv-head { align-items: flex-start; gap: 12px; margin-bottom: 16px; }
#service .sv-head h2 { margin: 0; font-size: 22px; }
#serviceclose { flex: 0 0 44px; min-height: 44px; text-align: center; }
#service .sv-lead, #service .sv-text { font-size: 14px; line-height: 1.6; opacity: .9; margin-bottom: 16px; }
#service .sv-cta { padding: 12px; margin-top: 20px; min-height: 44px; font-size: 12px; letter-spacing: normal; }
#servicebtn { min-height: 44px; max-width: 100%; font-size: 12px; white-space: normal; letter-spacing: .08em; }
@media (max-height: 500px) {
  .side-drawer.left, .side-drawer.right { top: 70px; bottom: 16px; }
  #titlecard .title-body, #service { top: 70px; max-height: calc(100dvh - 86px); }
}