/* 1.30.53: mobile layout corrections without affecting event, song or auth logic. */
.dashboard-hero h3 { font-size: clamp(20px, 2.15vw, 30px); white-space: nowrap; }
.dashboard-greeting-name { margin: 7px 0 0; color: var(--cp-text-secondary); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 820px) {
  .topbar { grid-template-columns: minmax(0,1fr) repeat(4, 40px); gap: 6px; }
  .topbar > :first-child { min-width: 0; }
  .topbar h2 { font-size: clamp(21px, 6vw, 26px); }
  .topbar .theme-toggle { min-width: 40px; width: 40px; justify-self: center; }
  .topbar #tourHelpButton { font-size: 17px; }
  .topbar .summary-grid { grid-column: 1 / -1; order: 3; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; overflow: visible; padding-bottom: 0; }
  .summary-tile { min-width: 0; min-height: 72px; padding: 10px 8px; }
  .summary-tile strong { font-size: clamp(20px, 6vw, 26px); }
  .summary-tile span { display: block; min-width: 0; font-size: clamp(10px, 2.75vw, 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dashboard-hero h3 { font-size: clamp(20px, 5.5vw, 27px); line-height: 1.18; letter-spacing: -.025em; white-space: nowrap; }
  .dashboard-greeting-name { font-size: 14px; }
}
@media (max-width: 360px) {
  .topbar { grid-template-columns: minmax(0,1fr) repeat(4, 36px); gap: 4px; }
  .topbar .theme-toggle { min-width: 36px; width: 36px; }
  .summary-tile { padding: 8px 5px; }
  .summary-tile span { font-size: 9.5px; }
  .dashboard-hero h3 { font-size: 20px; }
}

/* 1.30.54: keep the help action distinguishable from the theme switch. */
#tourHelpButton {
  border-color: color-mix(in srgb, var(--cp-primary) 55%, var(--cp-border));
  background: var(--cp-primary-soft);
  color: var(--cp-primary);
  font-weight: 750;
  white-space: nowrap;
}
#tourHelpButton::before { content: none !important; display: none !important; }
#tourHelpButton .tour-help-glyph { display: inline-block; font-size: 21px; line-height: 1; font-weight: 800; color: inherit; }
#tourHelpButton .tour-help-label { color: inherit; font-weight: 700; font-size: 13px; }
#tourHelpButton:focus-visible { outline: 2px solid var(--cp-primary); outline-offset: 2px; }
@media (max-width: 820px) {
  .topbar #tourHelpButton {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; font-size: 21px; min-height: 40px;
  }
  #tourHelpButton .tour-help-label { display: none; }
}
@media (max-width: 360px) { .topbar #tourHelpButton { min-height: 36px; } }