/* Gut Feeling: approved circular microbiome logo + true one-axis document scroll. */
/* Animated backgrounds and orbit effects can extend beyond the hero's box.
   Clip their sideways overflow without preventing regular page scrolling. */
html,body {max-width:100%;overflow-x:clip;}
.app-shell {width:100%;max-width:100%;overflow-x:clip;}
.main {min-width:0;}
/* Badge retains the custom circular emblem; never crop the outer brand lettering. */
.sidebar .brand {gap:9px;margin-left:4px;font-size:22px;white-space:nowrap;}
.brand .brand-mark, .auth-modal .brand .brand-mark {width:46px;height:46px;min-width:46px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#f8faf6;box-shadow:0 3px 12px #0c3f3120;transition:transform .3s ease;}
.brand .brand-mark img {display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;}
.brand:hover .brand-mark{transform:scale(1.06) rotate(-5deg);}
.auth-modal .brand .brand-mark{width:54px;height:54px;min-width:54px;}
.footer-brand{display:inline-flex;align-items:center;gap:8px;}
.footer-brand img{border-radius:50%;object-fit:cover;width:30px;height:30px;flex:none;}
footer{gap:12px;flex-wrap:wrap;align-items:center;}
/* Keep visual effects behind text, with no additional page width. */
.hero-atmosphere,.atmosphere-drifters{max-width:100%;}
.main:has(#page-home.active) .hero {min-width:0;}
.main:has(#page-home.active) .hero-copy{min-width:0;}
.content-grid,.main-column,.right-column{min-width:0;}
@media(max-width:1150px){.sidebar .brand{font-size:20px;gap:7px;}}
@media(max-width:800px){
  .topbar{gap:8px;}
  .top-actions{gap:8px;min-width:0;}
  .breadcrumb{min-width:0;}
}
@media(max-width:520px){
  .topbar{padding-left:15px;padding-right:15px;}
  .top-actions .small-primary{white-space:nowrap;}
  .top-actions .text-button{white-space:nowrap;}
  .main:has(#page-home.active) .hero{max-width:100%;}
}