/*
  /multi-account/best-practices/ (practices.jinja): the OU tree diagram and the sources list.
  The diagram is drawn twice (partials/_ou_tree.jinja): the wide drawing shows from 1,200 px up, the tall one below it,
  so its text stays near 13 px on a phone. display:none takes the hidden one out of the accessibility tree too.
*/
.ou-tree-figure { margin: 2.5rem 0; }
.ou-tree { display: block; width: 100%; height: auto; }
.ou-tree-wide { display: none; }
.ou-tree-tall { max-width: 30rem; margin: 0 auto; }
@media (min-width: 1200px) {
  .ou-tree-wide { display: block; }
  .ou-tree-tall { display: none; }
  .practices-article .ou-tree-figure { margin-left: calc((100% - min(76rem, 100vw - 4rem)) / 2); margin-right: calc((100% - min(76rem, 100vw - 4rem)) / 2); }
}
.ou-tree-figure figcaption { margin-top: 0.75rem; font-size: 0.875rem; color: hsl(var(--muted-foreground)); text-align: center; }
.practices-article table { display: block; overflow-x: auto; }
.practices-read { margin-top: 1rem; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.practices-sources { margin-top: 1rem; padding-left: 1.25rem; list-style: decimal; }
.practices-sources li { margin: 0.4rem 0; }
.practices-sources a { color: hsl(var(--link)); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }