/* Loaded after the presentation themes so interaction fixes survive them. */

/* Keep announcement thumbnails stable while loading, ready, or unavailable.
   The image viewer still opens the complete original at its natural ratio. */
#content .announcement-reading-image {
  position: relative;
  width: 50%;
  max-width: 480px;
  aspect-ratio: 4 / 3;
  max-height: 320px;
  background: var(--ga-soft, var(--surface));
}
#content .announcement-reading-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#content .announcement-thumbnail-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: auto;
  overflow-wrap: anywhere;
}
#content .announcement-reading-image[data-image-state="ready"] .announcement-thumbnail-status {
  display: none;
}

@media (max-width: 900px) {
  /* Give the menu and breadcrumb a row, then let utility actions wrap.
     Existing attendance sizing and the submissions breadcrumb remain intact. */
  #appShell .header {
    height: auto;
    min-height: 62px;
    flex-wrap: wrap;
    row-gap: 8px;
    padding-block: 8px;
  }
  #appShell .header .page-crumb {
    flex: 1 1 calc(100% - 48px);
    min-width: 0;
    max-width: calc(100% - 48px);
    margin-right: 0;
    white-space: nowrap;
  }
  #appShell .header .page-crumb > :is(.crumb-home, span:last-child) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #appShell .header > .btn {
    max-width: 100%;
    flex-shrink: 0;
  }

  /* Restore the mobile form size overridden by gallery-theme.css. */
  :is(#content, #modalRoot, dialog) :is(input:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]), select:not([multiple]):not([size]), textarea) {
    font-size: 16px !important;
  }
}

@media (max-width: 600px) {
  #content .announcement-reading-image {
    width: 100%;
    max-height: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #modalRoot .modal,
  .toast {
    animation: none;
  }
  #appShell .sidebar,
  #appShell .nav-backdrop,
  .switch-knob,
  .switch .thumb,
  .rank-fill,
  .progress-bar,
  .dist-fill {
    transition: none;
  }
}