/* Phone presentation only; recipe and shopping state remain shared with desktop. */
.nav-icon { display: none; }
.photo-select { display: none; }

@media (max-width: 580px) {
  :root { --phone-nav-height: 62px; --phone-action-height: 52px; --phone-safe-bottom: env(safe-area-inset-bottom, 0px); }
  html { scroll-padding-top: 86px; -webkit-text-size-adjust: 100%; }
  body { background: #f6f7f3; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  .app-shell { padding: 0 16px calc(var(--phone-nav-height) + var(--phone-safe-bottom) + 24px); }
  .topbar { height: calc(60px + env(safe-area-inset-top)); margin: 0 -16px 14px; padding: env(safe-area-inset-top) 16px 0; gap: 8px; background: rgba(246,247,243,.95); border: 0; }
  .topbar.has-back .brand > span { display: block; }
  .brand { gap: 8px; margin-right: auto; min-width: 0; }
  .brand strong { font: 750 21px/1.1 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -.7px; }
  .brand-mark { width: 36px; height: 36px; }
  .topbar .nav-back { width: 40px; height: 44px; min-width: 40px; border: 0; background: transparent; font-size: 32px; }
  .topbar-actions { flex: none; }
  .topbar #admin-button, .topbar #settings-button { display: none; }
  .account-button { min-height: 44px; max-width: 100px; border: 1px solid #e0e6df; padding: 7px 12px; border-radius: 22px; background: #fff; }
  .account-button strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

  /* One quiet navigation surface, with actions attached immediately above it. */
  .tabs { left: 0; right: 0; bottom: 0; height: calc(var(--phone-nav-height) + var(--phone-safe-bottom)); padding: 5px 12px calc(5px + var(--phone-safe-bottom)); border-radius: 0; border: 0; border-top: 1px solid #dde4db; background: rgba(250,251,248,.97); box-shadow: 0 -4px 20px #16362409; gap: 6px; }
  .tabs .tab, .tabs .mobile-more-tab { position: relative; min-height: 50px; padding: 4px 2px; font-size: 11px; line-height: 1.15; border-radius: 14px; font-weight: 650; }
  .tabs .tab.active, .tabs .mobile-more-tab.active { background: #e3eee1; color: #19583c; box-shadow: none; }
  .nav-icon { display: block; width: 23px; height: 23px; margin: 0 auto 3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabs .rumpfy-tab img { width: 26px; height: 26px; box-shadow: none; }
  .tabs .count { position: absolute; top: 0; right: 3px; min-width: 16px; height: 16px; margin: 0; font-size: 9px; line-height: 16px; padding: 0 4px; color: #fff; background: #276346; border: 1px solid #fafbf8; }
  .tab.active .count { color: #fff; background: #276346; }
  .choice-mobile-actions, .shopping-finish-dock { left: 0; right: 0; bottom: calc(var(--phone-nav-height) + var(--phone-safe-bottom)); min-height: var(--phone-action-height); margin: 0; padding: 6px 16px; border: 0; border-radius: 0; border-top: 1px solid #e0e6dc; background: rgba(250,251,248,.97); box-shadow: 0 -5px 16px #16362407; backdrop-filter: blur(16px); }
  .choice-mobile-actions { gap: 10px; }
  .choice-mobile-actions button { min-height: 40px; font-size: 12px; border-radius: 12px; padding: 6px; }
  .choice-mobile-actions span { min-width: 19px; height: 19px; margin: 0 0 0 3px; border-radius: 7px; }
  .shopping-finish-dock .button { min-height: 40px; font-size: 12px; }
  #catalog-view, #shopping-view { padding-bottom: calc(var(--phone-action-height) + 18px); }

  #catalog-view .section-heading h2 { font: 750 27px/1.13 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -.8px; }
  .eyebrow { font-size: 10px; letter-spacing: .12em; }
  #back-to-collections, .discovery-favorites { min-height: 38px; margin-bottom: 10px; padding: 6px 12px; border-radius: 20px; font-size: 12px; }
  .recipe-collection { margin-bottom: 26px; }
  .collection-heading { align-items: center; gap: 8px; margin-bottom: 10px; }
  .collection-heading h3 { font: 700 20px/1.2 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -.4px; }
  .collection-heading p { font-size: 13px; line-height: 1.4; }
  .collection-heading .small-button { min-height: 44px; padding: 7px 8px; border: 0; background: transparent; color: var(--green); }
  .collection-shelf { grid-auto-columns: 88%; gap: 12px; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .collection-shelf::-webkit-scrollbar { display: none; }
  .catalog-card { background: #fff; border: 1px solid #e6eae2; border-radius: 22px; box-shadow: 0 4px 14px #20322908; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .catalog-photo { height: 180px; }
  .catalog-card-body { padding: 14px; }
  .catalog-card-body h3 { min-height: 0; margin: 0 0 8px; font: 700 19px/1.22 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -.3px; }
  .catalog-tags { display: none; }
  .catalog-description { font-size: 14px; line-height: 1.45; margin-bottom: 10px; }
  .collection-shelf .catalog-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .catalog-at-a-glance { font-size: 12px; gap: 5px; margin-bottom: 8px; }
  .catalog-at-a-glance span { padding: 4px 7px; background: #edf3e9; }
  .catalog-rating { font-size: 12px; margin: 0 0 8px; }
  .nutrition { gap: 4px 8px; margin: 0 0 12px; }
  .nutrition span, .nutrition b { font-size: 12px; }
  .catalog-card .catalog-card-actions { gap: 8px; }
  .catalog-card .catalog-card-actions { grid-template-columns: 1fr; }
  .catalog-card .catalog-card-actions .course-recipe { display: none; }
  .catalog-card .catalog-card-actions button { min-height: 44px; border-radius: 12px; font-size: 14px; }
  .catalog-card .photo-select { display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 2px solid white; border-radius: 50%; background: #246546; color: white; font-size: 28px; line-height: 1; box-shadow: 0 3px 12px #122e2725; }
  .catalog-card .photo-select.selected { color: #19583c; background: #e3eee1; font-size: 23px; }
  .catalog-card.is-chosen { border-color: #7aa888; box-shadow: 0 0 0 1px #7aa888; }
  .favorite-recipe { width: 44px; height: 44px; }
  .choice-byline { font-size: 12px; }
  .recipe-actions-byline { margin: 0 0 8px; flex-wrap: wrap; }
  .guide-options span { font-size: 13px; min-height: 42px; }
  .guide-options input:focus-visible + span { outline: 3px solid #87ae8c; outline-offset: 2px; }
  .guide-selects > label { font-size: 12px; }
  input, select, textarea { font-size: 16px; } /* Prevent iOS focus zoom. */
  button, a, summary, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #87ae8c; outline-offset: 3px; }

  /* Bottom sheets: the closing control stays within reach while reading. */
  dialog { position: fixed; inset: auto 0 0; width: 100%; max-width: 100%; max-height: calc(100dvh - env(safe-area-inset-top) - 16px); margin: 0; padding: 20px 18px calc(24px + var(--phone-safe-bottom)); border-radius: 26px 26px 0 0; background: #fffefa; border: 0; box-shadow: 0 -12px 50px #10251d24; overscroll-behavior: contain; }
  dialog::backdrop { background: #172d2566; backdrop-filter: blur(4px); }
  dialog .dialog-head { position: sticky; top: -20px; z-index: 5; padding: 14px 0 12px; margin-top: -14px; background: #fffefa; }
  dialog .dialog-head h2 { font: 700 25px/1.15 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -.5px; }
  dialog .icon-button { min-width: 44px; min-height: 44px; border-radius: 50%; background: #eff2ec; }
  #recipe-dialog { max-width: 100%; }
  #recipe-dialog h2 { font: 750 25px/1.2 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -.5px; }
  #recipe-dialog .dialog-back { position: sticky; top: -12px; z-index: 6; min-height: 44px; padding: 8px 16px; border-radius: 22px; background: #fffefa; box-shadow: 0 3px 15px #20322918; }
  .dialog-recipe-list { max-height: none; overflow: visible; }
  .dialog-recipe-list .selected-recipe-chip { padding: 12px; border-radius: 17px; gap: 10px; }
  .dialog-recipe-list .selected-recipe-chip b { display: block; font-size: 15px; line-height: 1.35; }
  .dialog-recipe-list .selected-recipe-actions button { font-size: 13px; }
  .more-grid { gap: 10px; }
  .more-grid button { min-height: 78px; border-radius: 17px; background: #f3f5ef; }
  .more-grid b { font-size: 14px; }
  .step-list li { font-size: 16px; line-height: 1.65; }
  .shopping-item { min-height: 70px; gap: 10px; }
  .item-name b { font-size: 16px; }
  .item-qty { max-width: 105px; font-size: 13px; overflow-wrap: anywhere; }
  .hero { min-height: 0; padding: 24px 20px; margin-bottom: 20px; }
  .hero h1 { font-size: 30px; line-height: 1.12; }
  .hero-copy { font-size: 14px; }
  .hero-stats { padding: 10px; }
  .hero-stats strong { font-size: 20px; }
  .hero-stats span { font-size: 9px; }
  .rumpfy-profile { padding: 16px; }
  .rumpfy-profile > img { width: 64px; margin: 0 12px 8px 0; }
  .rumpfy-profile h2 { font-size: 23px; }
  .chat-messages { height: min(48dvh, 440px); }
  .chat-form { grid-template-columns: minmax(0, 1fr) auto; padding: 10px; }
  .chat-form .button { padding: 8px 12px; }
  body:has(dialog[open]) { overflow: hidden; }
  #toast { bottom: calc(var(--phone-nav-height) + var(--phone-action-height) + var(--phone-safe-bottom) + 12px); max-width: calc(100% - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .collection-shelf { scroll-snap-type: none; }
}