/* The article is the reading axis. Equal outer gutters keep its centre fixed;
   the outline occupies the left gutter without moving the title or body. */
@media (min-width:1280px) {
 .whoops-refined .editorial-article :is(.reading-layout,.article-header) {
  --reading-rail:clamp(180px,14vw,200px);
  --reading-gap:clamp(24px,2.5vw,40px);
  max-width:calc(2 * (var(--reading-rail) + var(--reading-gap)) + var(--reading-media) + 80px);
  grid-template-columns:var(--reading-rail) minmax(0,1fr) var(--reading-rail);
  column-gap:var(--reading-gap);
 }
 .whoops-refined .editorial-article .course-sidebar { grid-column:2; }
}

/* Switch navigation before a side rail would squeeze the reading measure.
   Keep 700px text and up to 840px media, including tablet-sized windows. */
@media (max-width:1279px) {
 .whoops-refined .editorial-article { --reading-gutter:40px; }
 .whoops-refined .editorial-article :is(.reading-layout,.article-header) {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  max-width:calc(var(--reading-media) + 2 * var(--reading-gutter));
  padding-inline:var(--reading-gutter);
 }
 .whoops-refined .editorial-article .article-header > :is(.breadcrumbs,.article-heading,.article-cover-media),
 .whoops-refined .editorial-article :is(.article-main,.course-sidebar) { grid-column:1; }
 .whoops-refined .editorial-article :is(.article-outline,.article-toc-desktop) { display:none; }
 .whoops-refined .editorial-article .article-toc-mobile {
  display:block;
  max-width:var(--reading-text);
  margin:0 auto 32px;
  border-block:1px solid var(--reading-line);
  padding:16px 0;
 }
 .whoops-refined .editorial-article .article-toc-mobile summary {
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  font-size:14px;
  list-style:none;
 }
 .whoops-refined .editorial-article .article-toc-mobile summary::-webkit-details-marker { display:none; }
 .whoops-refined .editorial-article .article-toc-mobile[open] summary { margin-bottom:16px; }
 .whoops-refined .editorial-article .mobile-toc-trigger { display:flex; }
}
@media (max-width:1024px) {
 .whoops-refined .editorial-article { --reading-gutter:32px; }
}
@media (max-width:600px) {
 .whoops-refined .editorial-article { --reading-gutter:20px; }
}

/* Keep course navigation after the reading content, without an implicit column. */
.whoops-refined .editorial-article .course-sidebar {
 display:block;
 grid-row:4;
 width:100%;
 max-width:var(--reading-text);
 margin-inline:auto;
}

/* Gutenberg supplies a figure wrapper; the demo supplies article-table-scroll.
   Scroll the wrapper, never turn the semantic table into a block container. */
.whoops-refined .editorial-article .rich-body .wp-block-table {
 max-width:100%;
 overflow-x:auto;
 border:1px solid var(--reading-line,#dce3ee);
 border-radius:6px;
 scrollbar-width:thin;
 scrollbar-color:#b8c2d3 transparent;
}
.whoops-refined .editorial-article .rich-body .wp-block-table > table {
 display:table;
 width:100%;
 min-width:100%;
 max-width:none;
 overflow:visible;
 margin:0;
 border:0;
 border-radius:0;
 border-collapse:collapse;
}
.whoops-refined .editorial-article .rich-body .wp-block-table :is(th,td) {
 vertical-align:top;
 overflow-wrap:anywhere;
}
.whoops-refined .editorial-article .rich-body .wp-block-table td > :last-child { margin-bottom:0; }
.whoops-refined .editorial-article .rich-body .wp-block-table:focus-visible { outline:2px solid var(--site-accent); outline-offset:3px; }
@media (max-width:700px) {
 .whoops-refined .editorial-article .rich-body .wp-block-table :is(th,td) {
  min-width:125px;
  padding:12px 14px;
 }
}