/* Mobile-only action bar refinement. Keeps the primary action visible without covering the brief. */
@media (max-width: 680px) {
  .app-shell {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .action-bar {
    width: 100%;
    min-height: 0;
    gap: 0;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    border-right: 0;
    border-left: 0;
    border-radius: 14px 14px 0 0;
  }

  .action-status {
    display: none;
  }

  .action-buttons {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(72px, .72fr) minmax(64px, .64fr) minmax(128px, 1.35fr);
    gap: 8px;
  }

  .action-button {
    min-width: 0;
    min-height: 50px;
    padding: 8px 10px;
    font-size: 15px;
    line-height: 1.15;
    white-space: normal;
  }

  #reset-button {
    font-size: 0;
  }

  #reset-button::after {
    content: "Restart";
    font-size: 15px;
  }

  #primary-button {
    font-weight: 820;
  }
}

@media (max-width: 380px) {
  .action-bar {
    padding-inline: 8px;
  }

  .action-buttons {
    grid-template-columns: 70px 62px minmax(118px, 1fr);
    gap: 6px;
  }

  .action-button,
  #reset-button::after {
    font-size: 14px;
  }
}