/* Demo-site CSS only. Selectors were checked against the built hd-garden 0.14.3 DOM.
   No engine files or production blog files are changed. */
.post-reading-page:has(.demo-wide-compose) {
  width: min(1104px, 100%);
  padding-inline: 32px;
  min-width: 0;
}
.post-reading-page:has(.demo-wide-compose) .article-reading-layout {
  display: block;
  margin-top: 48px;
  min-width: 0;
}
.post-reading-page:has(.demo-wide-compose) .article-reading-column {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  min-width: 0;
}
/* Fullscreen chrome used to take 44px from the entire right edge, in addition
   to g-play's 16px left padding and garden-ui-body's 32px horizontal padding.
   Give the toolbar its own top strip instead; keep the actual illustration full-width. */
.post-reading-page:has(.demo-wide-compose) .ux-fs:has(#ui-four-mechanisms-diagram) > .g-play {
  padding: 48px 0 0;
  border: 0;
  background: transparent;
}
.post-reading-page:has(.demo-wide-compose) #ui-four-mechanisms-diagram {
  margin: 0;
}
.post-reading-page:has(.demo-wide-compose) #ui-four-mechanisms-diagram > .garden-ui-body {
  padding: 0;
  min-width: 0;
}
.post-reading-page:has(.demo-wide-compose) #ui-four-mechanisms-diagram > figcaption {
  padding: 10px 0 0;
}
/* In the shipped CSS align=center has a later justify-content:center rule.
   Explicitly restore the intended two ends on this demo's real emitted DOM. */
.post-reading-page:has(.demo-wide-compose) .g-compose-card > .g-compose-row[data-justify="between"] {
  justify-content: space-between;
  align-items: center;
  text-align: start;
  overflow: visible;
}
.post-reading-page:has(.demo-wide-compose) .g-compose-card > .g-compose-row > .g-compose-h[data-align="start"] {
  flex: 0 1 auto;
  text-align: start;
  margin: 0;
}
.post-reading-page:has(.demo-wide-compose) .g-compose-card > .g-compose-row > .g-compose-icon {
  flex: none;
  margin-inline-start: auto;
  width: 1.15em;
  height: 1.15em;
}
.post-reading-page:has(.demo-wide-compose) .g-compose-figure > .g-compose-h[data-align="start"] {
  text-align: start;
}
.post-reading-page:has(.demo-wide-compose) .g-compose-card > .g-compose-text[data-tone="muted"] {
  color: #59616d;
}
.post-reading-page:has(.demo-wide-compose) .g-compose-card:nth-child(1) { border-color: #b3d1f4; }
.post-reading-page:has(.demo-wide-compose) .g-compose-card:nth-child(2) { border-color: #d6bdf2; }
.post-reading-page:has(.demo-wide-compose) .g-compose-card:nth-child(3) { border-color: #a4dfbf; }
.post-reading-page:has(.demo-wide-compose) .g-compose-card:nth-child(4) { border-color: #f1c7a6; }
.post-reading-page:has(.demo-wide-compose) .article-reading-column :not(pre) > code {
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 800px) {
  .post-reading-page:has(.demo-wide-compose) { padding-inline: 16px; }
  .post-reading-page:has(.demo-wide-compose) .g-compose { padding: 14px 10px; }
  /* Long site name + three fixed controls cannot fit on one 300px line.
     Wrap the name at its normal font size, retaining every control and letter. */
  body:has(.demo-wide-compose) .sh-bar {
    height: auto;
    min-height: var(--hdr);
    padding: 10px 12px;
    gap: 8px;
  }
  body:has(.demo-wide-compose) .sh-word {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }
  body:has(.demo-wide-compose) .sh-tools { flex: none; }
}