/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Ribbon button icons shown next to feature names. The light tile keeps the dark-gray
   icons visible when Pico switches to its dark theme. */
.ribbon-icon {
  width: 28px;
  height: 28px;
  padding: 3px;
  margin-right: 0.45rem;
  vertical-align: middle;
  background: #f5f5f5;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  box-sizing: content-box;
}

/* The Links tab screenshot is very wide: show it full size and let it scroll sideways on
   small screens rather than shrinking the buttons to an unreadable size. */
.ribbon-screenshot { margin: 0 0 2rem; }
.ribbon-screenshot .ribbon-scroll {
  overflow-x: auto;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.5rem;
  background: #fff;
}
.ribbon-screenshot img { display: block; max-width: none; width: 1100px; height: auto; }
@media (min-width: 1200px) { .ribbon-screenshot img { width: 100%; } }
.ribbon-screenshot figcaption { text-align: center; font-size: 0.875rem; color: var(--pico-muted-color); margin-top: 0.5rem; }
/* Paper can't scroll sideways, so when printing shrink the screenshot to the page width. */
@media print {
  .ribbon-screenshot .ribbon-scroll { overflow: visible; }
  .ribbon-screenshot img { width: 100%; }
}

/* Let the top menu wrap on phones instead of pushing the whole page wider than the screen. */
@media (max-width: 768px) {
  header nav { flex-wrap: wrap; }
  header nav ul { flex-wrap: wrap; }
  header nav ul li { padding-top: 0.25rem; padding-bottom: 0.25rem; }
}

/* Wide tables scroll inside their box on small screens instead of widening the page. */
figure:has(> table) { overflow-x: auto; }