html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.brandmark {
  font-size: clamp(14px, 3.3vw, 22px);
}

.brand strong .brand-title-line {
  display: block;
}

.brand strong .brand-title-line b {
  color: var(--orange);
  font-size: 1.12em;
  font-weight: 800;
}

/* Every panel header keeps its close action in the upper-right corner. */
.panel-head > button {
  flex: 0 0 auto;
  margin-left: auto;
}

#panel.stats-mode .panel-head {
  justify-content: flex-end;
}

#panel.stats-mode #panel-close {
  margin-left: auto;
}

@media (max-width: 700px) {
  #panel,
  #weather-panel {
    will-change: transform;
  }

  #panel.panel-swipe-dragging,
  #weather-panel.panel-swipe-dragging {
    transition: none !important;
    user-select: none;
  }

  .sheet-handle {
    position: relative;
    width: 88px;
    height: 30px;
    margin: -18px auto 4px;
    background: transparent;
    cursor: grab;
    touch-action: none;
  }

  .sheet-handle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 12px;
    width: 48px;
    height: 5px;
    border-radius: 999px;
    background: #b8c8c2;
    transform: translateX(-50%);
  }

  #sheet.sheet-dragging {
    transition: none !important;
    user-select: none;
  }

  #sheet {
    box-sizing: border-box;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    max-height: min(58dvh, 520px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 23px 20px max(22px, env(safe-area-inset-bottom));
  }

  #sheet > * {
    box-sizing: border-box;
    max-width: 100%;
  }

  #details {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-right: 0;
    overflow: hidden;
  }

  #details h2 {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    font-size: clamp(1.55rem, 7vw, 2rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }

  #details p,
  #details a {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .directions-button,
  .wikipedia-button {
    box-sizing: border-box;
    width: 100%;
  }

  .brand,
  .brand > div {
    min-width: 0;
  }

  .brand strong {
    font-size: clamp(17px, 4.8vw, 22px);
    line-height: 0.88;
    white-space: normal;
  }

  .welcome .searchbox input {
    font-size: 16px !important;
  }

  .brandmark {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
  }
}