/* Workspace layout boundaries. Wide data tables and the script canvas retain
   their own scrolling; the page itself does not hide horizontal overflow. */
body.studio:not(.auth-shell) :is(.studio-main, .studio-main > *, .page-heading > *, .section-heading > *, .actions > *, .card > :not(table), .studio-context > *, .studio-footer > *) {
  min-width: 0;
}
body.studio:not(.auth-shell) :is(h1, h2, h3, p, summary, dt, dd, .studio-context, .company-reason, .team-member, .account-popover, .script-list, .badge) {
  overflow-wrap: anywhere;
}
body.studio:not(.auth-shell) :is(input, select, textarea) {
  min-width: 0;
  max-width: 100%;
}
body.studio:not(.auth-shell) .btn {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
body.studio:not(.auth-shell) :is(.studio-context, .studio-footer, .result-counter, .script-toolbar) {
  flex-wrap: wrap;
}
body.studio:not(.auth-shell) .studio-context > [aria-current] { flex: 1 1 140px; }
body.studio:not(.auth-shell) :is(.table-scroll, .workspace-scroll-region, .admin-strip, #graphViewport) {
  overscroll-behavior-inline: contain;
  scrollbar-width: auto;
  scrollbar-color: var(--faint) var(--hover);
}
body.studio:not(.auth-shell) :is(.table-scroll, .workspace-scroll-region, #graphViewport) { max-width: 100%; }
/* Match the 1512px workspace container minus its two 36px content gutters.
   Do not replace this cap with the generic scroll-region max-width above. */
body.studio:not(.auth-shell) .admin-strip {
  width: calc(100% - 72px);
  max-width: 1440px;
  margin-inline: auto;
}
@media (max-width: 1000px) {
  body.studio:not(.auth-shell) .admin-strip { width: calc(100% - 48px); }
}
@media (max-width: 820px) {
  body.studio:not(.auth-shell) .admin-strip { width: calc(100% - 36px); }
}
@media (max-width: 600px) {
  body.studio:not(.auth-shell) .admin-strip { width: calc(100% - 32px); }
  body.studio:not(.auth-shell) .studio-context { padding-inline: 16px; }
}
body.studio:not(.auth-shell) .workspace-scroll-region { overflow-x: auto; }
body.studio:not(.auth-shell) .workspace-scroll-region:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
body.studio:not(.auth-shell) .workspace-scroll-hint {
  color: var(--soft);
  font-size: 12px;
  margin: 8px 0;
}
body.studio:not(.auth-shell) .metric-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
body.studio:not(.auth-shell) :is(.checkout-layout, .checkout-layout > *, .checkout-plan-cards > *, .checkout-month-cards > *) { min-width: 0; }
body.studio:not(.auth-shell) .checkout-summary > strong { overflow-wrap: anywhere; }
body.studio:not(.auth-shell) .checkout-layout .card { container-type: inline-size; }
body.studio:not(.auth-shell) .checkout-plan-cards button,
body.studio:not(.auth-shell) .checkout-month-cards button { overflow-wrap: anywhere; }
@container (max-width: 420px) {
  body.studio:not(.auth-shell) :is(.checkout-plan-cards, .checkout-month-cards) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body.studio:not(.auth-shell) .workspace-menu-close { display: none; }

@media (min-width: 821px) and (max-width: 1000px) {
  body.studio:not(.auth-shell) .checkout-summary { top: 146px; }
}
/* The editor's three panels need room before switching to a stacked layout. */
@media (max-width: 900px) {
  body.studio:not(.auth-shell) .script-editor { display: flex; flex-direction: column; height: auto; min-height: 0; }
  body.studio:not(.auth-shell) .block-library { display: flex; gap: 8px; flex-wrap: wrap; }
  body.studio:not(.auth-shell) .block-library h2 { width: 100%; }
  body.studio:not(.auth-shell) .library-block { width: auto; max-width: 100%; }
  body.studio:not(.auth-shell) .block-library :is(p, details) { width: 100%; }
  body.studio:not(.auth-shell) .graph-panel { height: 480px; flex: none; }
  body.studio:not(.auth-shell) .node-inspector { max-height: none; }
}
@media (max-width: 820px) {
  body.studio:not(.auth-shell) .studio-header { flex-wrap: nowrap; gap: 8px; padding: 12px; }
  body.studio:not(.auth-shell) .studio-brand { flex: 1; min-width: 0; }
  body.studio:not(.auth-shell) .studio-mark { width: 32px; height: 32px; flex-basis: 32px; }
  body.studio:not(.auth-shell) :is(.theme-toggle, .account-menu > summary, .avatar, .icon-button, .project-arrow) { min-width: 44px; min-height: 44px; }
  body.studio:not(.auth-shell) .btn { min-height: 44px; }
  body.studio:not(.auth-shell) :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size: 16px; }
  body.studio:not(.auth-shell) .studio-nav { width: min(340px, calc(100vw - 32px)); padding: 16px 16px 24px; }
  body.studio:not(.auth-shell) .studio-nav .nav-item { flex: none; min-height: 48px; white-space: normal; padding: 12px; }
  body.studio:not(.auth-shell) .studio-nav form { flex: none; }
  body.studio:not(.auth-shell) .workspace-menu-close {
    display: flex; position: sticky; top: 0; align-self: flex-end;
    flex: none; margin: 0 0 16px; z-index: 1;
    align-items: center; justify-content: center; width: 44px; height: 44px;
    border: 1px solid var(--line); border-radius: 50%; background: var(--hover);
    color: var(--ink); font: inherit; font-size: 24px; cursor: pointer;
  }
  body.studio.workspace-menu-open:not(.auth-shell) { overflow: hidden; }
  body.studio:not(.auth-shell) .admin-strip { padding-bottom: 16px; }
  body.studio:not(.auth-shell) .admin-strip a { min-height: 44px; display: flex; align-items: center; }
  body.studio:not(.auth-shell) .collection-tabs button { min-height: 44px; }
  body.studio:not(.auth-shell) :is(.team-invite-search, .checkout-layout [data-account-fields]) { min-width: 0; }
  body.studio:not(.auth-shell) .script-toolbar { align-items: stretch; flex-direction: column; }
  body.studio:not(.auth-shell) .company-action-menu > div { left: 0; right: auto; }
  body.studio:not(.auth-shell) .studio-footer { align-items: flex-start; gap: 12px; }
}
@media (max-width: 600px) {
  body.studio:not(.auth-shell) .studio-main { padding-inline: 16px; }
  body.studio:not(.auth-shell) :is(.page-heading, .section-heading) { gap: 16px; }
  body.studio:not(.auth-shell) :is(.section-heading, .team-member) { flex-wrap: wrap; }
  body.studio:not(.auth-shell) .section-heading > .actions { width: 100%; }
  body.studio:not(.auth-shell) .team-invite-search { grid-template-columns: minmax(0, 1fr); }
  body.studio:not(.auth-shell) .company-facts { grid-template-columns: minmax(0, 1fr); }
  body.studio:not(.auth-shell) .company-action-menu > div { min-width: min(240px, calc(100vw - 76px)); max-width: calc(100vw - 76px); }
  body.studio:not(.auth-shell) dialog.modal { padding: 20px; }
  body.studio:not(.auth-shell) .admin-main form > div[style*="display:flex"] { flex-wrap: wrap; }
  body.studio:not(.auth-shell) .admin-main form > div[style*="display:flex"] > div[style*="flex:1"] { flex: 1 1 180px !important; min-width: 0; }
}
@media (max-width: 520px) {
  body.studio:not(.auth-shell) .project-row { grid-template-columns: 34px minmax(0, 1fr) 44px; }
  body.studio:not(.auth-shell) .project-actions { gap: 10px; }
  body.studio:not(.auth-shell) .account-popover { min-width: 0; width: min(280px, calc(100vw - 24px)); }
}