/* Keep the editor controls readable; scale the canvas, not the panels. */
@media (min-width: 1101px) {
  .app { grid-template-columns: 220px minmax(0, 1fr); }
  .workspace { grid-template-columns: 260px minmax(0, 1fr); }
  .preview-rail { grid-template-columns: minmax(0, 1fr) 344px; }
  .content-column { padding-inline: 14px; }
  .side { padding-inline: 14px; }
}
@media (min-width: 1600px) {
  .app { grid-template-columns: 240px minmax(0, 1fr); }
  .workspace { grid-template-columns: 300px minmax(0, 1fr); }
  .preview-rail { grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (min-width: 1101px) and (max-width: 1279px) {
  .app { grid-template-columns: 200px minmax(0, 1fr); }
  .workspace { grid-template-columns: 240px minmax(0, 1fr); }
  .preview-rail { grid-template-columns: minmax(0, 1fr) 344px; }
  .top { gap: 8px; padding-inline: 14px; }
  .autosave-state small, .top-actions-divider { display: none; }
  .actions { gap: 5px; }
  .actions .top-action-btn { padding-inline: 10px; }
}
.preview-stack { min-width: 0; width: 100%; }
.preview-item.is-thumbnail { flex-basis: var(--fitted-width, var(--preview-active-width)); width: var(--fitted-width, var(--preview-active-width)); }
.preview-item .banner { zoom: var(--preview-fit, 1); }
.preview-item.is-thumbnail .banner { zoom: var(--preview-fit, 1); }
.stage { overscroll-behavior-y: auto; }
.side > * { min-width: 0; }
.side > .stack, .side > .project-nav-head, .side > .bulk-panel,
.side > .projects, .side > .side-profile { width: 100%; }
.side-actions, .folder-header { width: 100%; min-width: 0; }
.side-actions .btn { padding-inline: 10px; gap: 7px; }
.side-action-label { font-size: 13px; }
.content-panel .layer-item { grid-template-columns: 21px minmax(0, 1fr) auto !important; gap: 7px !important; }
.content-panel .layer-item-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inspector-panel > #inspectorForm, .inspector-panel > #inspectorDefaultBlock { flex-shrink: 0; min-width: 0; }
.inspector-panel .text-size-row { grid-template-columns: minmax(100px, 1fr) 24px 64px 24px; }
@media (max-width: 1100px) {
  .preview-rail { grid-template-rows: auto auto; height: auto; overflow: visible; }
  .preview-main-card { grid-row: 1; }
  .inspector-panel { grid-row: 2; }
}
@media (max-width: 720px) {
  .main { grid-template-rows: auto minmax(0, 1fr); }
  .top { height: auto; min-height: 68px; padding-block: 10px; gap: 8px; }
  .content-column > .content-panel.card { min-height: 0; }
}
.portfolio-preview .preview-size-label { white-space: nowrap; }

/* The card uses the real editor and campaign, with more room for the work. */
.portfolio-preview .app { grid-template-columns: 200px minmax(0, 1fr); }
.portfolio-preview .workspace { grid-template-columns: 200px minmax(0, 1fr); }
.portfolio-preview .preview-rail { grid-template-columns: minmax(0, 1fr); }
.portfolio-preview .inspector-panel { display: none !important; }
.portfolio-preview .side { padding: 22px 14px; }
.portfolio-preview .side-actions { margin-top: 24px; }
.portfolio-preview .brand-logo { width: 140px; }
.portfolio-preview .top { height: 54px; padding-inline: 20px; }
.portfolio-preview .main { grid-template-rows: 54px minmax(0, 1fr); }
.portfolio-preview .content-column { padding: 14px 10px; gap: 12px; }
.portfolio-preview .content-panel { padding: 12px !important; }
.portfolio-preview .content-panel .layer-item { padding-inline: 5px !important; }
.portfolio-preview .content-panel .layer-item-actions { display: none; }
.portfolio-preview .layer-search { display: none; }
.portfolio-preview .actions, .portfolio-preview .top-more, .portfolio-preview .project-edit-icon { display: none; }
.portfolio-preview .preview-controls { display: none; }
.portfolio-preview .preview-main-card { padding-top: 14px !important; grid-template-rows: minmax(0, 1fr) auto; }
.portfolio-preview .edit-mode-note { display: none; }
.portfolio-preview .stage { padding-bottom: 16px !important; }
.portfolio-preview .side-actions .btn { font-size: 12px; padding-inline: 8px; }
.portfolio-preview .side-profile { font-size: 11px; }
.portfolio-preview .side-profile small { font-size: 10px; }
.portfolio-preview .preview-stack { row-gap: 18px; padding-bottom: 0; }
.portfolio-preview .preview-item.is-active .banner { outline: 1px solid #bcc7c8; }
.portfolio-preview .preview-size-label::before,
.portfolio-preview .preview-size-label::after { display: none !important; }
.portfolio-preview .preview-item .preview-size-label { font-size: 12px; font-weight: 500; letter-spacing: .02em; }