/* Canonical phone layout. Loaded last to replace earlier experimental layers. */
.field-error:empty::before,.error-message:empty::before,.form-error:empty::before,.photo-error:empty::before,
.field-error[hidden]::before,.error-message[hidden]::before,.form-error[hidden]::before,.photo-error[hidden]::before{content:none!important}

@media (max-width:760px){
  html{min-height:100%;background:#fff}
  body{min-height:100%;padding-bottom:0!important;overflow-x:hidden;overscroll-behavior-y:auto}
  .app-header{margin:0 14px;padding:10px 0 14px;gap:10px;align-items:center;flex-wrap:nowrap}
  .brand{width:52px;height:52px;flex:0 0 52px;border-radius:12px}
  .header-copy{min-width:0}
  .header-copy .eyebrow{margin:0 0 2px;font-size:10px;line-height:1.2}
  .header-copy h1{margin:0 0 3px;font-size:21px;line-height:1.06}
  .header-copy p{margin:0;font-size:11px;line-height:1.25}

  .layout{display:grid;grid-template-columns:42px minmax(0,1fr);gap:7px;margin:0 8px;padding:0 0 12px}
  .sidebar{display:block;position:sticky;z-index:20;top:6px;width:42px;min-width:42px;height:max-content;padding:4px 0}
  .sidebar>p:first-child{display:none}
  .step-list li{height:34px;min-height:34px}
  .step-list button,.step-list button.current{width:38px;height:34px;min-height:34px;padding:3px 5px;gap:0;border:0!important;border-radius:99px;background:transparent!important;box-shadow:none!important;font-size:0;overflow:visible}
  .step-number{position:relative;width:28px;height:28px;flex:0 0 28px;border:0!important;border-radius:50%;background:#f2f2f2;color:#888;font-size:11px;overflow:visible}
  .step-list button.current .step-number{background:var(--success);color:#314719;box-shadow:none}
  .step-list button.complete .step-number{background:#f0f6e5;color:#4f6728}
  .step-list li:not(:last-child)::before,.step-list li:not(:last-child)::after{left:18px;top:29px;bottom:-5px}

  .form-card{min-width:0;padding-bottom:0;border-radius:22px}
  .progress-head{position:sticky;top:0;z-index:15;padding:13px 18px;border-radius:22px 22px 0 0;background:rgba(255,255,255,.96);box-shadow:0 4px 14px rgb(51 51 51 / 6%);backdrop-filter:blur(10px)}
  .progress-head>div:first-child{gap:2px;flex-direction:column;align-items:flex-start}
  #stepCounter{font-size:11px}
  #stepName{font-size:15px}
  #bookForm{min-width:0;padding:22px 18px calc(var(--mobile-footer-height,82px) + 18px)}
  .tab-title{font-size:28px;line-height:1.08}
  .step-intro{margin-bottom:24px}

  .form-nav{position:fixed!important;z-index:100;inset:auto 0 0 0;box-sizing:border-box;width:100vw;margin:0;padding:11px 18px calc(11px + env(safe-area-inset-bottom,0px));gap:10px;border-top:1px solid #ececec;background:#fff;box-shadow:0 -6px 24px rgb(61 61 61 / 10%);transform:translate3d(0,0,0);will-change:transform}
  .form-nav>.primary{flex:1;min-width:0}
  .form-nav .primary,.form-nav .secondary{min-height:54px;padding:12px 16px}
  body.keyboard-open .form-nav{display:none!important}
  body.keyboard-open #bookForm{padding-bottom:22px}

  .calendar-panel:not([hidden]){position:fixed;z-index:120;left:50%;right:auto;top:50dvh;bottom:auto;display:block;width:min(420px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - var(--mobile-footer-height,82px) - 24px);margin:0;padding:16px;border:1px solid #e2e2e2;border-radius:22px;background:#fff;box-shadow:0 20px 60px rgb(35 35 35 / 28%);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;transform:translate(-50%,-50%)}
  .calendar-toolbar{position:sticky;top:-16px;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;margin:0 0 12px;padding:16px 0 10px;background:#fff}
  .calendar-toolbar select{width:100%;min-width:0;min-height:48px;font-size:16px}
  .calendar-toolbar #closeCal{width:auto;min-width:58px;min-height:48px}
  .calendar-grid{gap:3px}
  .calendar-grid button{min-height:40px;font-size:15px}

  .firework-star{z-index:150;filter:drop-shadow(0 1px 2px rgb(255 255 255 / 80%));will-change:transform,opacity}
  .step-list button.level-up::after{content:none!important}

  .step-encouragement{left:50%;bottom:calc(var(--mobile-footer-height,82px) + 12px);width:calc(100vw - 24px);padding:17px 18px;transform:translate(-50%,18px);opacity:0;transition:opacity 1.05s ease,transform 1.05s cubic-bezier(.2,.75,.25,1);animation:none!important}
  .step-encouragement.is-visible{opacity:1;transform:translate(-50%,0);animation:toast-border 3.8s ease-in-out both!important}
  .step-encouragement.is-hiding{opacity:0;transform:translate(-50%,-8px)}
  .step-encouragement .karma-line{margin-bottom:6px}
  .step-encouragement .karma-line strong{font-size:19px}
  .step-encouragement>#karmaMessage{font-size:13px;line-height:1.45}

  [data-question="graphic_style"] .options{grid-template-columns:minmax(0,1fr)!important}
  [data-question="graphic_style"] .visual-choice{box-sizing:border-box;width:100%;min-height:0;padding:10px}
  [data-question="graphic_style"] .choice-art{display:block;width:100%;max-width:none;height:auto;aspect-ratio:1;object-fit:cover;border-radius:14px}
  [data-question="graphic_style"] .choice-label{margin-top:12px;font-size:18px}
  [data-question="graphic_style"] .choice-description{max-width:32ch;margin:5px auto 8px;font-size:13px}

  .review-section .review-art{display:block;width:100%;max-width:300px;height:auto;margin:14px auto;border-radius:18px;object-fit:contain}

  .style-preview{box-sizing:border-box;width:calc(100vw - 16px);max-width:none;height:calc(100dvh - 16px);max-height:none;margin:auto;padding:10px;border-radius:22px;overflow:auto;overscroll-behavior:contain}
  .style-preview-toolbar{position:sticky;z-index:3;top:-10px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:0;padding:10px 6px 12px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px)}
  .style-preview-toolbar>div{min-width:0}
  .style-preview-toolbar strong{font-family:Nunito,Manrope,Arial,sans-serif;font-size:19px;line-height:1.2}
  .style-preview-toolbar p{margin:4px 0 0;color:#666;font-size:12px;line-height:1.35}
  .style-preview-close{position:sticky;top:0;flex:0 0 auto;min-height:44px!important;padding:9px 14px!important;border:1px solid #bbb!important;border-radius:99px!important;background:#fff!important;color:#333!important;box-shadow:none!important;font-size:14px!important}
  .style-preview-stage{display:grid;place-items:center;min-height:calc(100dvh - 150px);overflow:auto;touch-action:pinch-zoom}
  .style-preview-stage img{display:block;width:100%;height:auto;max-width:none;object-fit:contain;touch-action:pinch-zoom}
  .style-preview-hint{margin:8px 8px 4px;color:#666;font-size:12px;text-align:center}
}

@media (max-width:380px){
  .app-header{margin-inline:10px}
  .brand{width:46px;height:46px;flex-basis:46px}
  .header-copy h1{font-size:19px}
  .layout{margin-inline:5px;grid-template-columns:40px minmax(0,1fr);gap:5px}
  #bookForm{padding-inline:14px}
  .form-nav{padding-inline:14px}
  .calendar-panel:not([hidden]){left:50%;right:auto;width:calc(100vw - 16px);padding:12px}
  .calendar-toolbar{top:-12px;padding-top:12px}
}

@media (prefers-reduced-motion:reduce){
  .step-encouragement{transition:none!important}
}