/* Magnet Studio M33 — focused iPhone workspace.
   One canvas, one compact app bar, one context sheet and one six-step dock.
   The previous version showed all four layers at once; this pass removes the
   overlaps and deliberately gives each state a single visual priority. */

@media (max-width: 760px) {
  :root {
    --m11-appbar: 54px !important;
    --m11-dock: 64px !important;
    --m11-sheet-expanded: min(48dvh, 455px) !important;
  }

  /* Public app shell stays native but stops eating the first screen. */
  .ms-header {
    min-height: 60px !important;
    padding: 7px 8px 7px 10px !important;
    border-radius: 21px !important;
  }
  .ms-brand__mark { width: 40px !important; height: 40px !important; }
  .ms-cart-link,
  .ms-menu {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }
  .ms-mobile-nav {
    top: calc(var(--m32-safe-top) + 65px) !important;
    max-height: min(68dvh, 590px) !important;
    padding: 10px !important;
    border-radius: 24px !important;
  }
  .ms-mobile-nav a {
    min-height: 52px !important;
    font-size: 16px !important;
  }
  .m16-home,
  .m17-page,
  .ms-dashboard,
  .ms-commerce {
    padding-top: calc(var(--m32-safe-top) + 78px) !important;
  }

  /* A true compact editor app bar. */
  .m11-studio .m2-project-bar {
    height: calc(var(--m11-appbar) + env(safe-area-inset-top)) !important;
    padding: calc(env(safe-area-inset-top) + 6px) 8px 6px !important;
    grid-template-columns: 38px minmax(0,1fr) 68px 38px !important;
    gap: 6px !important;
    border-radius: 0 0 18px 18px !important;
  }
  .m11-studio .m2-back {
    width: 38px !important;
    min-height: 38px !important;
  }
  .m11-studio .m2-title-field input {
    padding-inline: 2px !important;
    font-size: 14px !important;
    font-weight: 760 !important;
  }
  .m11-mobile-price {
    min-width: 68px !important;
    padding: 4px 7px !important;
    border-radius: 12px !important;
  }
  .m11-mobile-price span { font-size: 8px !important; }
  .m11-mobile-price strong { font-size: 14px !important; }
  .m11-studio .m2-history-actions {
    width: 38px !important;
    min-width: 38px !important;
    display: grid !important;
    place-items: center !important;
    position: static !important;
    gap: 0 !important;
    overflow: visible !important;
  }
  .m11-studio .m2-history-actions button {
    display: none !important;
    position: static !important;
  }
  .m11-studio .m2-history-actions button:first-child {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
  }

  /* Canvas toolbar is a single compact strip. */
  .m11-studio .m2-canvas-toolbar {
    min-height: 46px !important;
    top: 7px !important;
    left: 8px !important;
    right: 8px !important;
    padding: 4px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 28px rgba(36,50,92,.11), inset 0 1px 0 rgba(255,255,255,.92) !important;
  }
  .m11-studio .m4-toolbar-actions { gap: 5px !important; }
  .m11-studio .m4-preview-tabs,
  .m11-studio .m2-zoom-controls {
    height: 38px !important;
    border-radius: 12px !important;
  }
  .m11-studio .m4-preview-tabs button,
  .m11-studio .m2-zoom-controls button {
    width: 32px !important;
    height: 32px !important;
  }
  .m11-studio .m4-preview-tabs svg,
  .m11-studio .m2-zoom-controls svg {
    width: 18px !important;
    height: 18px !important;
  }
  .m11-studio .m2-zoom-controls strong { display: none !important; }
  .m11-studio .m2-zoom-controls button:nth-last-child(-n+2) { display: none !important; }

  /* The preview owns the middle of the phone. */
  .m11-studio .m2-stage {
    padding: 57px 5px calc(var(--m11-dock) + env(safe-area-inset-bottom) + 5px) !important;
  }
  .m11-studio .m2-safe-zone {
    width: min(82vw, 360px) !important;
    max-height: 52dvh !important;
  }
  .m11-studio .m2-artwork {
    width: min(72vw, 330px) !important;
    max-height: 50dvh !important;
  }
  .m11-studio .m2-artwork img { max-height: 48dvh !important; }
  .m11-studio .m2-artwork.is-pending-cut,
  .m11-studio .m2-artwork.is-scene { width: min(82vw, 375px) !important; }

  /* Only one status pill is visible and it no longer collides with outline. */
  .m11-studio .m3-pending-pill {
    top: 58px !important;
    left: 10px !important;
    right: auto !important;
    width: auto !important;
    max-width: calc(100% - 20px) !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
  }
  .m11-studio .m3-pending-pill small { display: none !important; }
  .m11-studio .m2-outline-label {
    top: 58px !important;
    right: 10px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
  .m11-studio.is-step-upload .m2-outline-label,
  .m11-studio.is-step-cut .m2-outline-label { display: none !important; }
  .m11-studio:has(.m2-inspector.is-mobile-expanded) .m3-pending-pill,
  .m11-studio:has(.m2-inspector.is-mobile-expanded) .m2-outline-label {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* During processing the sheet disappears and the progress card gets the stage. */
  .m11-studio .m4-processing-overlay {
    width: calc(100% - 38px) !important;
    max-width: 330px !important;
    top: 43% !important;
    padding: 18px !important;
    border-radius: 24px !important;
    box-shadow: 0 26px 70px rgba(25,38,79,.2) !important;
  }
  .m11-studio .m4-processing-overlay h2,
  .m11-studio .m4-processing-overlay b {
    font-size: 19px !important;
    line-height: 1.18 !important;
  }
  .m11-studio .m4-processing-overlay p,
  .m11-studio .m4-processing-overlay small {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  /* Context sheet: compact by default, useful when expanded, never 70% of screen. */
  .m11-studio.is-step-upload { --m11-sheet-expanded: min(56dvh, 525px) !important; }
  .m11-studio.is-step-cut { --m11-sheet-expanded: min(50dvh, 465px) !important; }
  .m11-studio.is-step-art { --m11-sheet-expanded: min(53dvh, 495px) !important; }
  .m11-studio.is-step-transform { --m11-sheet-expanded: min(49dvh, 455px) !important; }
  .m11-studio.is-step-output { --m11-sheet-expanded: min(54dvh, 505px) !important; }
  .m11-studio.is-step-proof { --m11-sheet-expanded: min(62dvh, 585px) !important; }

  .m11-studio .m2-inspector {
    left: 7px !important;
    right: 7px !important;
    bottom: calc(var(--m11-dock) + env(safe-area-inset-bottom) + 5px) !important;
    border-radius: 27px 27px 19px 19px !important;
    box-shadow: 0 -15px 44px rgba(31,44,85,.17), 0 6px 20px rgba(31,44,85,.08), inset 0 1px 0 #fff !important;
  }
  .m11-studio .m2-inspector.is-mobile-collapsed {
    height: 58px !important;
    border-radius: 23px 23px 17px 17px !important;
  }
  .m11-studio .m11-sheet-grabber {
    min-height: 58px !important;
    padding: 7px 16px 7px !important;
    grid-template-rows: 7px 1fr !important;
  }
  .m11-studio .m11-sheet-grabber > i {
    width: 40px !important;
    height: 5px !important;
  }
  .m11-studio .m11-sheet-grabber > span small { font-size: 9px !important; }
  .m11-studio .m11-sheet-grabber > span b { font-size: 14px !important; }
  .m11-studio .m11-sheet-grabber > svg { width: 18px !important; height: 18px !important; }
  .m11-studio .m2-inspector-panel {
    padding: 10px 15px 18px !important;
  }
  .m11-studio .m2-panel-heading {
    margin-bottom: 12px !important;
  }
  .m11-studio .m2-panel-heading > span { font-size: 9.5px !important; }
  .m11-studio .m2-panel-heading h2 {
    margin-top: 4px !important;
    font-size: 25px !important;
  }
  .m11-studio .m2-panel-heading p {
    display: block !important;
    margin-top: 6px !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  /* Horizontal choices remain readable without turning into giant cards. */
  .m11-studio .m2-mode-list button {
    min-width: 76vw !important;
    min-height: 64px !important;
    padding: 10px 11px !important;
    border-radius: 18px !important;
  }
  .m11-studio .m2-mode-list button > span { width: 32px !important; height: 32px !important; }
  .m11-studio .m2-mode-list button b { font-size: 14px !important; }
  .m11-studio .m2-mode-list button small { font-size: 11.5px !important; }
  .m11-studio .m6-cut-presets button,
  .m11-studio .m3-tool-grid button,
  .m11-studio .m7-art-presets button {
    min-width: 43vw !important;
    min-height: 56px !important;
    padding: 9px !important;
    border-radius: 16px !important;
  }
  .m11-studio .m6-cut-presets button b,
  .m11-studio .m3-tool-grid button b,
  .m11-studio .m7-art-presets button b { font-size: 13px !important; }
  .m11-studio .m6-cut-presets button small,
  .m11-studio .m3-tool-grid button small,
  .m11-studio .m7-art-presets button small { font-size: 10.5px !important; }
  .m11-studio .m2-range {
    margin: 9px 0 !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }
  .m11-studio .m2-range > span { font-size: 12.5px !important; }
  .m11-studio .m2-process-state {
    margin-top: 8px !important;
    padding: 10px 11px !important;
    border-radius: 16px !important;
  }
  .m11-studio .m2-process-state b { font-size: 13px !important; }
  .m11-studio .m2-process-state small { display: none !important; }
  .m11-studio .m4-smart-cut-action,
  .m11-studio .m5-mask-edit-action {
    min-height: 52px !important;
    border-radius: 16px !important;
    font-size: 13px !important;
  }
  .m11-studio .m5-mask-edit-card__heading small { display: none !important; }

  /* Six-step dock is stable, readable and never hides behind the home indicator. */
  .m11-studio .m7-step-progress {
    height: calc(var(--m11-dock) + env(safe-area-inset-bottom)) !important;
    min-height: var(--m11-dock) !important;
    padding: 5px 5px calc(5px + env(safe-area-inset-bottom)) !important;
    left: 6px !important;
    right: 6px !important;
    gap: 1px !important;
    border-radius: 21px 21px 0 0 !important;
  }
  .m11-studio .m7-step-progress button {
    min-height: 52px !important;
    padding: 3px 1px !important;
    grid-template-rows: 23px 13px !important;
    border-radius: 14px !important;
  }
  .m11-studio .m7-step-progress button > svg {
    width: 21px !important;
    height: 21px !important;
  }
  .m11-studio .m7-step-progress button b,
  .m11-studio .m7-step-progress button > small {
    font-size: 8.5px !important;
    line-height: 1 !important;
  }
  .m11-studio .m7-step-progress button > span {
    width: 22px !important;
    height: 22px !important;
    margin-left: 19px !important;
  }

  .m11-studio .m3-toast {
    width: calc(100% - 22px) !important;
    top: calc(var(--m11-appbar) + env(safe-area-inset-top) + 7px) !important;
    padding: 10px 12px !important;
    border-radius: 15px !important;
    font-size: 12.5px !important;
  }

  /* Expanded sheet becomes the focus instead of colliding with the canvas UI. */
  .m11-studio:has(.m2-inspector.is-mobile-expanded) .m2-canvas-toolbar {
    opacity: .22 !important;
    pointer-events: none !important;
  }
  .m11-studio:has(.m2-inspector.is-mobile-expanded) .m2-artwork,
  .m11-studio:has(.m2-inspector.is-mobile-expanded) .m2-safe-zone {
    opacity: .62 !important;
    transition: opacity .22s ease !important;
  }

  html[data-display-mode='standalone'] .m11-studio .m2-project-bar {
    background: rgba(247,249,255,.93) !important;
  }
}

@media (max-width: 390px) {
  .m11-studio .m2-project-bar {
    grid-template-columns: 36px minmax(0,1fr) 58px 36px !important;
    gap: 4px !important;
  }
  .m11-studio .m2-back,
  .m11-studio .m2-history-actions,
  .m11-studio .m2-history-actions button:first-child {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
  .m11-mobile-price { min-width: 58px !important; }
  .m11-mobile-price span { display: none !important; }
  .m11-studio .m2-title-field input { font-size: 13px !important; }
  .m11-studio .m7-step-progress button b,
  .m11-studio .m7-step-progress button > small { font-size: 8px !important; }
}

@media (max-height: 720px) and (max-width: 760px) {
  .m11-studio.is-step-upload,
  .m11-studio.is-step-cut,
  .m11-studio.is-step-art,
  .m11-studio.is-step-transform,
  .m11-studio.is-step-output { --m11-sheet-expanded: min(48dvh, 390px) !important; }
  .m11-studio.is-step-proof { --m11-sheet-expanded: min(58dvh, 480px) !important; }
}