/* Final mobile containment layer. Keep component structure intentional even
   when older shared grid rules are present earlier in the cascade. */
@media (max-width: 720px) {
  .main {
    width: 100%;
    max-width: 100%;
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
  }

  .panel,
  .campaign-workspace,
  .campaign-deployments-panel,
  .plan-channel-deployments,
  .plan-channel-list,
  .campaign-group-body,
  .campaign-item {
    min-width: 0;
    max-width: 100%;
  }

  /* Deployment accordions must remain vertical cards. The legacy
     .simple-channel-row grid is only appropriate inside the old editor. */
  #plan-deployments-form .plan-channel-list > .channel-deployment {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
  }

  #plan-deployments-form .channel-deployment > summary {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 18px !important;
    grid-template-rows: auto auto;
    gap: 2px 10px;
    width: 100%;
    min-height: 66px;
    padding: 10px 12px;
  }

  #plan-deployments-form .channel-deployment > summary > .brand-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    position: static;
  }

  #plan-deployments-form .channel-deployment-heading {
    grid-column: 2;
    grid-row: 1;
  }

  #plan-deployments-form .channel-deployment-summary {
    grid-column: 2;
    grid-row: 2;
  }

  #plan-deployments-form .channel-deployment > summary > i {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
  }

  #plan-deployments-form .channel-deployment-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    padding: 12px;
  }

  #plan-deployments-form .channel-deployment-title,
  #plan-deployments-form .channel-deployment-window,
  #plan-deployments-form .channel-deployment-content,
  #plan-deployments-form .channel-deployment-controls {
    grid-column: 1;
    min-width: 0;
    width: 100%;
  }

  #plan-deployments-form .channel-deployment-window {
    grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr);
  }

  #plan-deployments-form .channel-deployment-window input {
    padding-right: 5px;
    padding-left: 5px;
    text-align: center;
  }

  .plan-channel-toolbar {
    gap: 8px;
    padding: 2px 0 12px;
  }

  .plan-channel-toolbar label,
  .plan-channel-toolbar select,
  .plan-channel-toolbar .button {
    min-width: 0;
    width: 100%;
  }

  .plan-channel-guidance {
    padding: 10px 1px 3px;
    line-height: 1.5;
  }

  .plan-deployment-save {
    padding: 7px 1px 2px;
  }

  /* The collapsible campaign wrapper adds one DOM level, so restore the
     deliberate row inset and keep the link action from becoming a rail. */
  .campaign-group-body > .campaign-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 36px !important;
    gap: 10px;
    width: 100%;
    max-width: none;
    min-height: 82px;
    margin: 0 !important;
    padding: 12px 14px !important;
    border-top: 1px solid var(--line);
  }

  .campaign-group-body > .campaign-item.selectable {
    grid-template-columns: 28px minmax(0, 1fr) 36px !important;
  }

  .campaign-group-body > .campaign-item .campaign-open {
    align-self: stretch;
    padding: 0;
  }

  .campaign-group-body > .campaign-item .campaign-open strong {
    display: block;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.32;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .campaign-group-body > .campaign-item .campaign-open small {
    margin-top: 2px;
    line-height: 1.35;
  }

  .campaign-group-body > .campaign-item .campaign-share {
    align-self: center;
    justify-self: end;
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
    background: #f3f6f1 !important;
    box-shadow: none !important;
  }

  .campaign-group-actions {
    padding: 10px 14px 4px;
  }

  .campaign-group-actions .button {
    min-height: 38px;
    padding: 7px 12px;
  }

  .campaign-group-body > p,
  .campaign-group-body > .campaign-bulk {
    margin-right: 14px !important;
    margin-left: 14px !important;
  }

  /* Menus should float within the visual viewport instead of inheriting a
     desktop width that collides with safe-area margins. */
  .resource-action-popover,
  .user-action-menu > div,
  .event-action-menu > div,
  .task-action-popover,
  .workspace-menu,
  .global-search-results {
    max-width: calc(100vw - max(24px, env(safe-area-inset-left) + env(safe-area-inset-right) + 16px));
  }

  .report-builder-overlay,
  .campaign-assist-overlay,
  .campaign-assets-overlay,
  .campaign-channels-overlay,
  .task-editor-overlay,
  .confirm-overlay {
    padding-right: max(10px, env(safe-area-inset-right));
    padding-left: max(10px, env(safe-area-inset-left));
  }

  .section-actions,
  .campaign-toolbar-actions,
  .report-builder-actions {
    gap: 8px;
  }

  .section-actions > .button,
  .campaign-toolbar-actions > .button,
  .report-builder-actions > .button {
    min-width: 0;
  }
}

@media (max-width: 350px) {
  #plan-deployments-form .channel-deployment-window {
    grid-template-columns: minmax(0, 1fr);
  }

  #plan-deployments-form .channel-deployment-window > span {
    display: none;
  }

  .campaign-group-body > .campaign-item {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }
}