/* Local responsive fixes; keep the downloaded stylesheet unchanged. */
@media (max-width: 980px) {
  /* The desktop hover strip must not intercept taps on the fixed dock. */
  .hotzone { display: none; }
}

@media (max-width: 620px) {
  .app { padding-bottom: calc(300px + env(safe-area-inset-bottom, 0px)); }
  .shelf, .shelf-head, .tabs { min-width: 0; }
  .shelf-head { grid-template-columns: minmax(0, 1fr); }
  .tabs { grid-column: 1; width: 100%; }
  .search { grid-column: 1; justify-self: stretch; max-width: none; width: 100%; }

  .dock {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 8px 10px;
    padding: 10px 12px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .dock-bowl { min-width: 0; margin-top: 0; }
  .dock .bowl { width: 104px; max-width: 100%; height: 70px; }
  .dock .bowl-item svg { width: 34px; height: 34px; }
  .dock-toggle { right: 0; bottom: 0; }
  .dock-hint { display: none; }
  .dock-nums { flex-wrap: wrap; gap: 2px 10px; }
  .dock-nums b { font-size: 17px; }
  .dock-bar { height: auto; min-height: 28px; }
  .dock-bar-fill { position: absolute; inset: 0 auto 0 0; }
  .dock-bar span { position: relative; padding: 3px 5px; font-size: 10px; text-align: center; }
  .dock-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .dock-actions .btn { min-width: 0; min-height: 44px; padding: 8px 12px; }

  .dock:has(.basket--dense) .dock-bowl,
  .dock:has(.basket--dense) .dock-stats { grid-column: 1 / -1; }
  .basket--dense { min-width: 0; }
  .basket--dense .basket-list { max-width: 100%; max-height: 88px; padding-right: 34px; }
  .basket--dense .basket-row { max-width: calc(100vw - 78px); }

  /* Keep the result heading inside the narrowest phone viewport too. */
  .verdict-head { min-width: 0; max-width: 100%; flex-wrap: wrap; }
}