/* Waste Desk top brand bar — mirrors Acemow's masthead row + share/QR bar
   (Cliff, 2026-10-18: "The top part needs to be like acemow... Qr code etc"). */
.wd-brandbar { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; margin: 0 0 10px; }
.wd-brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.wd-brand-icon { width: 52px; height: 52px; border-radius: 12px; flex: none; }
.wd-brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wd-wordmark { font-family: Georgia, serif; font-weight: 800; font-size: 1.55rem; line-height: 1; color: #fff; letter-spacing: -.02em; white-space: nowrap; }
.wd-brand-descriptor { font-size: 11px; font-weight: 900; letter-spacing: .22em; color: #bcd6c3; white-space: nowrap; }
.wd-controls { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }
.wd-head-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; text-decoration: none; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }
.wd-head-btn.install { background: #2e6b45; border-color: #2e6b45; color: #fff; }
.wd-sharebar { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 14px; }
.wd-share-hint { font-size: 13px; color: #dce9df; }
.wd-share-status { font-size: 13px; color: #bcd6c3; }
.wd-share-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; }
.wd-qr-tile { margin-left: auto; flex: none; line-height: 0; }
.wd-qr-tile img { width: 38px; height: 38px; border-radius: 6px; background: #fff; }
.wd-ios-hint { margin: 0 0 12px; color: #dce9df; font-size: .9rem; }
@media (max-width: 760px) {
  /* "The Waste Desk" is a long wordmark — on phone width the brand takes
     its own row and the Install / Log in controls wrap underneath it
     instead of crowding it out (Cliff screenshot, 2026-10-18). */
  .wd-brandbar { flex-wrap: wrap; }
  .wd-wordmark { font-size: 1.32rem; }
  .wd-head-btn { padding: 0 12px; }
  .wd-brand-descriptor { font-size: 9.5px; }
  /* Balanced controls row: Install and Log in split the row evenly,
     nothing crowding or covering the wordmark (Cliff, 2026-10-18:
     "The tabs are blocking not balance"). */
  .wd-controls { margin-left: 0; width: 100%; }
  .wd-controls .wd-head-btn { flex: 1; justify-content: center; }
}