/* Desktop entry: let the navigation take its natural height and center the
   complete entry below it. Extremely short/zoomed windows retain natural scroll. */
@media (min-width: 1024px) and (min-height: 600px) {
  body.studio-upload-active:has(#studioView.active[data-stage="upload"]) {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    height: auto;
    --studio-entry-height: clamp(260px, calc(100dvh - 360px), 420px);
  }
  body.studio-upload-active > .appbar {
    flex: none;
    top: 0;
    margin-block: 12px 0;
  }
  body.studio-upload-active:has(#studioView.active[data-stage="upload"]) #mainContent.page {
    flex: none;
    min-height: auto;
    display: block;
    padding-block: 16px clamp(96px, 15vh, 150px);
  }
  #studioView.active[data-stage="upload"] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(16px, calc(6dvh - 24px), 48px);
  }
  #studioView.active[data-stage="upload"] .hero { margin: 0 auto; flex: none; }
  body.studio-upload-active #studioView .workspace { row-gap: 12px; }
}
@media (min-width: 1024px) and (min-height: 600px) and (max-height: 760px) {
  body.studio-upload-active #studioView #dropzone.upload { padding: 16px; }
  body.studio-upload-active #dropInner { padding: 12px; }
  body.studio-upload-active .drop-icon { margin-bottom: 12px; }
  body.studio-upload-active .upload-select { margin-block: 16px 8px; }
}

/* Wide desktop layout. Loaded after component/theme styles on both surfaces.
   Breakpoints use CSS viewport pixels, so OS scaling and browser zoom work naturally. */
@media (min-width: 1600px) {
  :root {
    --app-shell-width: calc(82% + 224px);
    --wide-gap: clamp(24px, 1vw, 40px);
    --wide-body: clamp(14px, calc(12px + .16vw), 18px);
    --wide-small: clamp(12px, calc(10px + .14vw), 15px);
  }

  body > .appbar {
    min-height: clamp(68px, 3vw, 96px);
    padding-inline: clamp(24px, 1.25vw, 48px);
  }
  body > .appbar .primary-nav-item { font-size: var(--wide-body); }
  body > .appbar .top-action { font-size: var(--wide-body); }

  /* Upload homepage retains its 1200px maximum width; height adapts below. */

  /* Working canvases use more of the screen; the editing rail stays readable. */
  body.studio-active:has(#studioView[data-stage="create"]) {
    --app-shell-width: calc(100% - clamp(48px, 3.3vw, 128px));
  }
  body.studio-active:has(#studioView.focused-editor[data-stage="create"]) #mainContent.page {
    width: var(--app-shell-width); margin-inline: auto; padding: 32px 0 24px;
    height: auto;
  }
  #studioView.focused-editor[data-stage="create"] .workspace {
    grid-template-columns: minmax(0, 1fr) clamp(360px, 15vw, 520px);
    gap: var(--wide-gap);
    height: calc(100dvh - clamp(68px, 3vw, 96px) - 56px) !important;
  }
  #studioView.focused-editor[data-stage="create"] .reference-toolbar { min-height: 68px; }
  #studioView.focused-editor[data-stage="create"] .reference-toolbar-title strong,
  #studioView.focused-editor[data-stage="create"] #contextFields label,
  #studioView.focused-editor[data-stage="create"] #uMoreDesc,
  #studioView.focused-editor[data-stage="create"] .editor-panel-nav button { font-size: var(--wide-body); }
  #studioView.focused-editor[data-stage="create"] .reference-toolbar-actions button,
  #studioView.focused-editor[data-stage="create"] .editor-panel-hint { font-size: var(--wide-small); }
  #studioView.focused-editor[data-stage="create"] #remixCard .context-title { font-size: clamp(20px, .7vw, 26px); }
  #studioView.focused-editor[data-stage="create"] .editor-panel-nav button { min-height: 44px; }

  /* Gallery card widths and the seven-column cap are defined in creations.css. */
  #creationsView { --creations-gutter: clamp(24px, 1vw, 40px); }
  .creation-filters button, #creationsSearch { font-size: var(--wide-body); }
  .creations-meta { font-size: var(--wide-small); }
  .creations-search { width: clamp(280px, 15vw, 440px); }
  .inspiration-gallery { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .studio-result-view { width: var(--app-shell-width); max-width: none; }

  /* All admin routes fill the work area, with bounded outer gutters. */
  .admin-app {
    --admin-gutter: clamp(32px, 1.7vw, 64px);
    grid-template-columns: clamp(236px, 8vw, 288px) minmax(0, 1fr);
  }
  .admin-app .page-content {
    width: 100%; max-width: none; margin: 0;
    padding: var(--admin-gutter) var(--admin-gutter) 48px;
  }
  .admin-app .topbar { padding-inline: var(--admin-gutter); }
  .admin-app .topbar h1 { font-size: clamp(22px, .8vw, 30px); }
  .admin-app .nav-item, .admin-app .sidebar-foot :is(a, button) {
    height: clamp(44px, 1.6vw, 56px); font-size: var(--wide-body);
  }
  .admin-app .breadcrumb, .admin-app .admin-chip strong { font-size: var(--wide-small); }
  .admin-app .primary-button, .admin-app .secondary-button,
  .admin-app .text-button, .admin-app .danger-button,
  .admin-app .toolbar :is(input, select), .admin-app .analytics-filters label { font-size: var(--wide-body); }
  .admin-app .analytics-filters :is(input, select) { min-height: 44px; }
  .admin-app .analytics-filters { gap: 16px; }
  .admin-app .search-control { max-width: 560px; }
  .admin-app .data-table th { font-size: var(--wide-small); height: 48px; }
  .admin-app .data-table td { font-size: var(--wide-body); height: 60px; }
  .admin-app .data-table :is(th, td):last-child { width: 1%; white-space: nowrap; }
  .admin-app .user-email { max-width: clamp(240px, 15vw, 500px); }
  .admin-app .homepage-settings { max-width: none; }
  .admin-app .homepage-image-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

  .operations-overview, #opsResults, .product-analytics, #analyticsResults,
  .ops-hero-grid, .ops-two-columns, .analytics-columns { gap: var(--wide-gap); }
  .ops-hero-grid { grid-template-columns: minmax(0, 1fr) clamp(360px, 22vw, 640px); }
  .ops-kpi { padding: clamp(20px, .85vw, 32px) !important; }
  .ops-kpi strong { font-size: clamp(30px, 1.15vw, 44px) !important; }
  .ops-kpi-label { flex-wrap: wrap; }
  .ops-kpi-label span { font-size: clamp(10px, .32vw, 12px); }
  .admin-app .analytics-kpi p, .ops-funnel-row > div:first-child,
  .ops-attention button > span, .ops-fact span, .analytics-facts > div { font-size: var(--wide-body); }
  .admin-app .analytics-kpi small, .ops-muted, .ops-footnote, .ops-context,
  .ops-attention small, .ops-fact small, .ops-funnel-row small,
  .analytics-note, .analytics-footnote, .analytics-errors p { font-size: var(--wide-small); }
  .ops-panel h3, .admin-app .analytics-panel h2 { font-size: clamp(19px, .7vw, 26px); }
  .ops-section-kicker { font-size: var(--wide-small); }
  .ops-fact strong { font-size: clamp(23px, .85vw, 32px); }
  .ops-fact { min-height: 120px; }
  .ops-trend-tabs button { min-height: 40px; font-size: var(--wide-small); }
  .ops-chart-legend, .ops-day, .ops-bars b { font-size: var(--wide-small); }
  .operations-overview { --ops-plot-height: clamp(180px, 9vw, 300px); }
  .ops-chart { min-height: 240px; }
  .ops-bars { height: calc(var(--ops-plot-height) + 32px); }
  .ops-bar { width: clamp(16px, .65vw, 25px); }
  .ops-funnel { gap: 16px; }
  .analytics-panel .panel-head { padding: 0 0 20px; }
  .product-analytics { --analytics-plot-height: clamp(180px, 9vw, 300px); }
  .analytics-trend { min-height: calc(var(--analytics-plot-height) + 48px); }
  .analytics-trend > div { font-size: var(--wide-small); }
}

/* At ultra-wide sizes, place related reports beside one another in DOM order. */
@media (min-width: 2400px) {
  #opsResults { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; }
  #opsResults > * { grid-column: 1 / -1; min-width: 0; }
  #opsResults > .ops-hero-grid { grid-column: span 7; height: 100%; }
  #opsResults > .ops-conversion-grid { grid-column: span 5; height: 100%; }
  #opsResults > .ops-models-panel, #opsResults > .ops-recent-panel { grid-column: span 6; }
  .ops-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, .65fr); }
  .ops-hero-grid, .ops-two-columns { align-items: stretch; }
  :is(.ops-hero-grid, .ops-conversion-grid, .ops-quality-grid) > .ops-panel { height: 100%; }
  .ops-trend-panel, .ops-attention-panel,
  .ops-conversion-grid > .ops-panel:last-child { display: flex; flex-direction: column; }
  .ops-trend-panel #opsTrend { display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: 100%; }
  .ops-trend-panel .ops-chart { align-items: end; flex: 1; }
  .ops-trend-panel .ops-bars { height: 100%; }
  .ops-attention-panel .ops-attention { flex: 1; grid-template-rows: repeat(5, minmax(60px, 1fr)); }
  .ops-conversion-grid > .ops-panel:last-child .ops-facts { flex: 1; grid-auto-rows: 1fr; }
  .ops-quality-grid :is(.ops-facts, .ops-money-grid) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #analyticsResults { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; }
  #analyticsResults > * { grid-column: 1 / -1; min-width: 0; }
  #analyticsResults > .analytics-trend-panel,
  #analyticsResults > .analytics-revenue-panel { grid-column: span 7; height: 100%; }
  #analyticsResults > .analytics-columns,
  #analyticsResults > .analytics-source-panel { grid-column: span 5; height: 100%; }
  #analyticsResults > .analytics-columns {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: stretch;
  }
  #analyticsResults > .analytics-columns > .analytics-panel { height: 100%; }
  #analyticsResults > :is(.analytics-trend-panel, .analytics-revenue-panel, .analytics-source-panel) {
    display: flex;
    flex-direction: column;
  }
  #analyticsResults > .analytics-trend-panel .analytics-trend { flex: 1; }
  #analyticsResults > .analytics-source-panel .table-scroll { flex: 1; }
}