/* Demo component CSS lives in assets/tabberwocky.css via head include */

/* Left-align all demos consistently */
.tabberwocky-demo { text-align: left; }

/* Compact toolbar demo overrides - keep blue background tight to buttons */
.tabberwocky-demo.compact {
  display: inline-block;
  width: auto;
  max-width: none;
  justify-self: start;
  align-self: start;
}
.tabberwocky-demo.compact .tabberwocky-window { display: inline-block; }
.tabberwocky-window #top-toolbar.toolbar-compact {
  display: inline-flex;
  justify-content: flex-start;
  width: auto;
  border-radius: 8px;
  flex-wrap: wrap; /* allow wrapping on narrow screens */
  gap: var(--action-button-min-gap);
  background: var(--berkeley-blue-100) !important; /* restore canonical background */
}

/* Spacing around demos */
.feature-details + p { margin-top: 24px; margin-bottom: 24px; }
.section-intro + .feature-details { margin-top: 8px; }
.tabberwocky-demo + .feature-text { margin-top: 20px; }

/* Sort by Domain demo - fixed width like overview (no dynamic resizing) */
.domain-demo-container { display: inline-block; width: 360px !important; }
.domain-demo-container .tabberwocky-window { width: 360px !important; }
@media (max-width: 420px) {
  .domain-demo-container,
  .domain-demo-container .tabberwocky-window {
    width: 100% !important;
    max-width: 360px;
  }
}

/* Favicon Grid demo */
#favicon-grid .tabberwocky-demo { display: inline-block; width: auto; max-width: none; }
#favicon-grid .tabberwocky-window,
#favicon-grid #domain-grid { width: fit-content; }
#favicon-grid .domain-instructions,
#favicon-grid .domain-items { width: auto; }

/* Prevent wide demo internals from causing layout overflow */
#favicon-grid .tabberwocky-window { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Domain Grid demo: lock width to avoid blank area expansion (overrides above when present) */
#favicon-grid .tabberwocky-demo { width: 360px !important; max-width: 360px !important; display: inline-block; }

/* Responsive demo scaling in general page context */
@media (max-width: 1024px) { .tabberwocky-demo { max-width: 90%; } }
@media (max-width: 768px) { .tabberwocky-demo { max-width: 100%; } }