/*
 * Product visual foundation
 * A final, shared layout layer for every web surface.  It deliberately owns
 * rhythm and responsive density only; business-page CSS remains responsible
 * for its unique workflow states.
 */
:root {
  --layout-wide: 1360px;
  --layout-gutter: clamp(20px, 4vw, 72px);
  --space-section: clamp(28px, 4vw, 56px);
  --space-card: clamp(20px, 2.2vw, 32px);
  --surface-radius: 20px;
}

html { scroll-padding-top: 24px; }
body { min-width: 320px; }

/* Main owner workspace: keep a calm reading width and a consistent rhythm. */
.owner-app:not(.intent-home) .approved-formal-page {
  width: min(var(--layout-wide), calc(100% - (var(--layout-gutter) * 2))) !important;
  padding-top: clamp(32px, 5vw, 64px) !important;
  padding-bottom: clamp(56px, 8vw, 112px) !important;
}

.owner-app:not(.intent-home) .approved-formal-page > * + * {
  margin-top: var(--space-section);
}

.owner-app:not(.intent-home) .section-block,
.owner-app:not(.intent-home) .delivery-result-shell,
.owner-app:not(.intent-home) .product-library-shell,
.owner-app:not(.intent-home) .product-task-shell,
.owner-app:not(.intent-home) .delivery-control {
  padding: var(--space-card);
}

/* Standalone workspaces use the same spacing even when opened directly. */
.engagement-shell,
.publishing-shell,
.research-shell {
  width: min(var(--layout-wide), calc(100% - (var(--layout-gutter) * 2))) !important;
  padding-top: clamp(36px, 5vw, 68px) !important;
  padding-bottom: clamp(64px, 8vw, 116px) !important;
}

.engagement-shell > * + *,
.publishing-shell > * + *,
.research-shell > * + * {
  margin-top: 24px;
}

.engagement-head,
.publishing-head,
.research-masthead {
  margin-bottom: clamp(28px, 4vw, 48px) !important;
  padding-bottom: clamp(20px, 3vw, 32px) !important;
}

.engagement-head > div,
.publishing-head > div,
.research-masthead > div { max-width: 780px; }

.panel,
.publish-card,
.session-card,
.research-card,
.task-card,
.result-card,
.notice { padding: var(--space-card) !important; }

.publish-columns,
.research-grid,
.workspace { gap: clamp(20px, 2.4vw, 32px) !important; }

.publish-card form,
.research-card form,
.panel form { gap: 18px; }

.publish-card label,
.research-card label,
.panel label { gap: 8px; }

.v8-header { padding: clamp(26px, 4vw, 52px) var(--layout-gutter) !important; }
.v8-layout {
  gap: clamp(20px, 2.4vw, 32px) !important;
  padding: clamp(28px, 4vw, 52px) var(--layout-gutter) clamp(64px, 8vw, 112px) !important;
}
.v8-card { padding: var(--space-card) !important; }

/* Administration is denser by nature, not narrower or visually compressed. */
.admin-app .stage { padding-bottom: clamp(56px, 8vw, 112px); }
.admin-app .masthead,
.admin-app .page-canvas {
  width: min(var(--layout-wide), calc(100% - (var(--layout-gutter) * 2))) !important;
}
.admin-app .masthead { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(28px, 4vw, 48px); }
.admin-app .command-actions { flex-wrap: wrap; row-gap: 8px; }

@media (max-width: 860px) {
  .owner-app:not(.intent-home) .approved-formal-page,
  .engagement-shell,
  .publishing-shell,
  .research-shell,
  .admin-app .masthead,
  .admin-app .page-canvas {
    width: min(100% - 32px, var(--layout-wide)) !important;
  }

  .publishing-head,
  .research-masthead,
  .engagement-head { gap: 18px !important; }

  .publish-columns,
  .research-grid,
  .workspace { grid-template-columns: minmax(0, 1fr) !important; }

  .v8-header { grid-template-columns: 1fr !important; gap: 14px !important; }
  .v8-back { padding-top: 0 !important; }
}

@media (max-width: 560px) {
  :root { --layout-gutter: 16px; --space-card: 18px; --surface-radius: 16px; }
  .owner-app:not(.intent-home) .approved-formal-page > * + *,
  .engagement-shell > * + *,
  .publishing-shell > * + *,
  .research-shell > * + * { margin-top: 18px; }
  .engagement-head h1,
  .publishing-head h1,
  .research-masthead h1 { font-size: clamp(28px, 9vw, 36px) !important; }
  .panel,
  .publish-card,
  .session-card,
  .research-card,
  .task-card,
  .result-card,
  .notice,
  .v8-card { border-radius: var(--surface-radius) !important; }
}