/* Responsive overrides — load LAST so media queries beat module styles. */

/* Wide desktop — grow the on-screen label so it fills more of the preview
   column instead of floating small in a sea of panel padding. Screen-only:
   print.css and download.js both hard-reset the stage to the real 70mm/110mm
   size and transform:none, so this never touches the exported PDF. Values
   are picked so height (110mm * scale) stays comfortably under a typical
   viewport minus the 66px sticky nav offset and panel padding. */
@media (min-width:1200px){
  :root{--label-preview-scale:1.65}
}
@media (min-width:1600px){
  :root{--label-preview-scale:1.9}
}

@media (max-width:900px){
  :root{--label-preview-scale:1.0583}


  .home-grid,.create-grid{grid-template-columns:1fr}
  .home-left{padding:3.5rem 2rem}
  .home-left h1{font-size:2.75rem}
  .home-right{padding:3rem 2rem}

  .form-panel{border-right:none;border-bottom:1px solid var(--rule);max-height:none}
  .preview-panel{max-height:none;padding:2rem 1.25rem 5rem}

  /* WCAG 2.1 mobile touch targets — minimum 44x44 */
  .x-btn{width:44px;height:44px;font-size:1.2rem}
  .ig-row{grid-template-columns:1fr 80px 44px}
  .g-row{grid-template-columns:1fr 44px}
  .ig-fresh-btn{width:44px;height:44px;top:50%;bottom:auto;transform:translateY(-50%)}

  /* Floating jump button so the form-side user can reach the preview */
  .mobile-jump{display:block;position:fixed;bottom:calc(1rem + env(safe-area-inset-bottom));right:calc(1rem + env(safe-area-inset-right));z-index:50;background:var(--ink);color:var(--paper);padding:.85rem 1.25rem;font-family:var(--font-ui);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;border:none;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25)}
  .mobile-jump:hover{background:#2a2924}
  .mobile-jump.hidden{display:none}
}

@media (max-width:560px){
  :root{--label-preview-scale:.926}
  .home-left{padding:3rem 1.5rem}
  .home-left h1{font-size:2.25rem}
  .home-right{padding:2rem 1.5rem}
  .form-panel,.preview-panel{padding:2rem 1.5rem}
  .form-panel{padding-top:2rem}
  .preview-panel{padding:1.5rem 1rem 5rem}
}

@media (max-width:380px){
  :root{--label-preview-scale:.86}
}