/* SURPRIA Mobile UX — 2026-08
   Touch-first layer: no desktop redesign. */
html{scroll-padding-top:84px}
@media (max-width: 760px){
  body{overflow-x:hidden}
  button,.btn,a.btn,input,select,textarea,summary{touch-action:manipulation}
  .btn,button[type="submit"]{min-height:46px}
  input,select,textarea{font-size:16px!important} /* prevents iOS focus zoom */

  /* Creation: one task at a time */
  .event-create-layout,.event-editor-layout,.event-form-layout{display:block!important}
  .event-preview-column,.event-preview-panel,.event-preview-sticky{
    position:static!important;top:auto!important;width:100%!important;max-height:none!important
  }
  .event-preview-column{order:-1}
  .event-section{scroll-margin-top:86px}
  .event-fields-grid{grid-template-columns:1fr!important}
  .event-section-number{font-size:.76rem}
  .event-advanced>summary{min-height:48px;display:flex;align-items:center}
  .theme-picker,.theme-grid{grid-auto-columns:min(78vw,290px)}
  .theme-card{scroll-snap-align:start}
  .theme-list,.theme-picker{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .event-form-actions,.event-actions{
    position:sticky;bottom:0;z-index:25;margin-left:-16px;margin-right:-16px;
    padding:10px 16px max(10px,env(safe-area-inset-bottom));
    background:color-mix(in srgb, Canvas 94%, transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)
  }
  .event-form-actions .btn,.event-actions .btn-primary{width:100%}

  /* Event page: reaction/status first, secondary controls quieter */
  .event-view-header,.event-hero-actions{gap:10px}
  .event-view-header .btn,.event-hero-actions .btn{flex:1 1 auto}
  .recipient-row,.reaction-row{min-height:58px}
  .recipient-quick-dialog{
    width:100%!important;max-width:none!important;margin:auto 0 0!important;
    border-radius:22px 22px 0 0!important;max-height:88dvh
  }
  .recipient-quick-dialog::backdrop{background:rgba(10,12,20,.68)}
  .recipient-quick-form{padding:20px 18px calc(18px + env(safe-area-inset-bottom))!important}
  .recipient-quick-actions{position:sticky;bottom:0}
  .recipient-quick-actions .btn{flex:1}

  /* Dashboard: cards instead of dense controls */
  .events-toolbar,.dashboard-toolbar{align-items:stretch!important}
  .events-filters{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:5px}
  .events-filters a{white-space:nowrap;scroll-snap-align:start;min-height:42px;display:flex;align-items:center}
  .event-card-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
  .event-card-actions .btn:first-child:last-child{grid-column:1/-1}
  .dashboard-grid{grid-template-columns:1fr!important}

  /* Checkout: recommended plan and CTA stay readable */
  .checkout-layout,.checkout-grid{grid-template-columns:1fr!important}
  .checkout-auto-plan{align-items:flex-start!important;padding:17px!important}
  .checkout-auto-plan-price{font-size:1.2rem!important}
  .checkout-actions,.checkout-submit-wrap{
    position:sticky;bottom:0;z-index:20;padding-bottom:max(10px,env(safe-area-inset-bottom))
  }

  /* Public reveal: prioritize the experience, respect notches */
  .surprise-shell,.surprise-stage{min-height:100dvh}
  .surprise-shell{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  video{max-width:100%;height:auto}
}
@media (max-width: 420px){
  .event-card-actions{grid-template-columns:1fr}
  .checkout-auto-plan{display:grid!important;gap:10px!important}
  .theme-picker,.theme-grid{grid-auto-columns:84vw}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.public-theme-preview,.theme-card-media,.pregnancy-theme-image{aspect-ratio:16/9;overflow:hidden}.public-theme-preview img,.theme-card-media img,.pregnancy-theme-image img{width:100%;height:100%;object-fit:cover}