/* ARTICLE_VIEWPORT_LAYOUT_20260922_V1 */
html.articles-layout { scrollbar-gutter: stable; }
body.articles-page { width: 100%; min-width: 0; max-width: 100%; overflow-x: clip; }
.articles-page > .app-shell { grid-template-columns: 260px minmax(0, 1fr); }
.articles-page .main,
.articles-page .dashboard-card { min-width: 0; max-width: 100%; }
.articles-page .content-scope-switch { max-width: 100%; }
.articles-page .article-list-scroll {
  width: 100%; min-width: 0; max-width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain;
}
.articles-page .workflow-counters { min-width: 0; max-width: 100%; }

/* The editor fits the viewport; only its content and tab strip scroll. */
.articles-page .art-modal-bg {
  width: 100%; max-width: 100%; min-width: 0;
  overflow: hidden; overscroll-behavior: contain;
}
.articles-page .art-modal {
  min-width: 0; width: 100%; max-width: 900px;
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  overflow: hidden;
}
.articles-page .art-modal-head,
.articles-page .art-tabs,
.articles-page .art-body,
.articles-page .art-foot,
.articles-page .tab-panel,
.articles-page .fld,
.articles-page .g2 { min-width: 0; max-width: 100%; }
.articles-page .art-body {
  min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
}
.articles-page .art-tabs { overscroll-behavior-x: contain; }
.articles-page .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.articles-page .fld input,
.articles-page .fld select,
.articles-page .fld textarea { min-width: 0; max-width: 100%; }
.articles-page .fld input[type=checkbox],
.articles-page .fld input[type=radio] { width: auto; flex: 0 0 auto; }
.articles-page #art-source-proof-v5 > div { grid-template-columns: minmax(0, 1fr) auto !important; }
.articles-page .wy-ed { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.articles-page .wy-ed pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.articles-page .wy-ed iframe,
.articles-page .wy-ed video { max-width: 100%; }
.articles-page .wy-ed table { display: block; max-width: 100%; overflow-x: auto; }
.articles-page #art-publish-schedule { min-width: 0; max-width: 100%; }
.articles-page #art-scheduled-at { min-width: 0; max-width: 100%; flex: 1 1 190px; }
.articles-page .art-foot button { max-width: 100%; white-space: normal; }
html.article-editor-open,
body.articles-page.article-editor-open { overflow: hidden; }

@media (max-width: 820px) {
  .articles-page > .app-shell { grid-template-columns: minmax(0, 1fr); }
  .articles-page .content-scope-switch {
    display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .articles-page .content-scope-btn {
    min-width: 0; padding: 10px 6px; white-space: normal;
    font-family: inherit; font-size: 12px; line-height: 1.35;
  }
  .articles-page .art-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .articles-page .art-toolbar select { width: 100%; min-width: 0; max-width: 100%; }
  .articles-page #filter-search { grid-column: 1 / -1; width: 100%; min-width: 0 !important; }
  .articles-page #art-count { grid-column: 1 / -1; }
  .articles-page .workflow-counters { flex-wrap: wrap; overflow: visible; }
  .articles-page .workflow-counter { white-space: normal; }
  .articles-page .art-modal-head,
  .articles-page .art-body { padding: 12px; }
  .articles-page .art-foot { padding: 10px 12px max(10px, env(safe-area-inset-bottom)); }
  .articles-page .art-foot button { flex: 1 1 110px; min-height: 42px; padding: 8px; font-family: inherit; font-size: 13px; line-height: 1.35; font-weight: 700; }
  .articles-page #art-publish-schedule { padding: 10px 12px !important; }
  .articles-page .fld input:not([type=checkbox]):not([type=radio]),
  .articles-page .fld select,
  .articles-page .fld textarea,
  .articles-page #art-scheduled-at,
  .articles-page .wy-ed { font-size: 16px !important; }
  .articles-page .article-album-summary { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .articles-page .g2 { grid-template-columns: minmax(0, 1fr); }
  .articles-page #art-source-proof-v5 > div { grid-template-columns: minmax(0, 1fr) !important; }
  .articles-page #art-source-name { min-width: 0 !important; }
}