/* Small-screen content refinements. Load after the page's existing styles. */
@media (min-width: 701px) and (max-width: 900px) {
  .custom-d20-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
    padding-inline: 20px;
  }

  .custom-d20-gallery {
    position: static;
  }

  .custom-d20-examples {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 760px) {
  /* Larger touch areas replace the existing gaps between footer links. */
  body.ember .footer > div > a:not(.footer-brand):not(.footer-instagram),
  body.ember .footer > div > .analytics-preferences:not([hidden]) {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 44px;
    margin-bottom: 0;
    padding-block: 8px;
    font-size: 15px;
    line-height: 1.5;
  }

  /* Keep native list markers beside the first line of each contents link. */
  .ember .article-toc ol > li {
    margin-bottom: 0;
  }

  .ember .article-toc ol > li > a {
    display: block;
    box-sizing: border-box;
    min-height: 44px;
    padding-block: 10px;
    font-size: 15px;
    line-height: 1.5;
  }

  .ember .article-toc > .guide-index-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
  }

  /* These controls are inside the embedded roller document. */
  .roller-embed .reset-expression,
  .roller-embed .repeat-last,
  .roller-embed .advanced-roll > summary,
  .roller-embed .quick-rolls-menu > summary {
    min-height: 44px;
    font-size: 16px;
  }

  .roller-embed .dice-row > .modifier-option {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: 4px 8px;
    font-size: 12px !important;
    line-height: 1.4;
  }

  .roller-embed .modifier-option select,
  .roller-embed .quality-label select {
    box-sizing: border-box;
    min-height: 44px;
    font-size: 16px;
    line-height: 1.4;
  }
}

@media (max-width: 440px) {
  /* Give each face choice its full card width for the name and description. */
  .custom-d20-form .d20-face-card {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    min-height: 0;
    padding: 14px 10px;
  }

  .custom-d20-form .d20-face-card > span:not(.d20-face-check) {
    min-width: 0;
    width: 100%;
  }

  .custom-d20-form .d20-face-card strong {
    white-space: normal;
  }
}