@media (max-width: 1249px) {
  .filter-toolbar {
    flex-wrap: wrap;
  }

  .search-field {
    flex-basis: 100%;
  }

  .filter-control {
    flex: 1 1 140px;
  }
}

@media (max-width: 1023px) {
  .catalog-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .material-list-row {
    grid-template-columns: 44px minmax(0, 1fr) auto 44px;
    grid-template-areas:
      "swatch identity trust detail"
      "swatch type channel detail"
      "swatch calibrator revision detail";
  }

  .material-list-row .material-swatch {
    grid-area: swatch;
  }

  .material-list-row .material-identity {
    grid-area: identity;
  }

  .material-list-row .list-material-type {
    grid-area: type;
  }

  .material-list-row .list-trust {
    grid-area: trust;
  }

  .material-list-row .list-calibrator {
    grid-area: calibrator;
  }

  .material-list-row .material-revision {
    grid-area: revision;
  }

  .material-list-row > .badge-channel {
    grid-area: channel;
    justify-self: start;
  }

  .material-list-row .detail-button {
    grid-area: detail;
  }
}

@media (max-width: 935px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: fixed;
    z-index: 90;
    inset: 0 auto 0 0;
    height: 100dvh;
    min-height: 0;
    transform: translateX(-100%);
    transition: transform 180ms ease-out;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .icon-button.sidebar-close,
  .icon-button.menu-button {
    display: inline-flex;
  }

  .main-content {
    padding: 20px;
  }

  .contribution-layout {
    grid-template-columns: 1fr;
  }

  .submission-summary {
    position: static;
  }
}

@media (max-width: 639px) {
  .contribution-kind-choice {
    grid-template-columns: minmax(0, 1fr);
  }
  .dialog.drawer {
    width: 100vw;
    max-width: none;
  }

  .drawer .dialog-surface {
    border-radius: 0;
  }

  .main-content {
    gap: 12px;
    padding: 16px;
  }

  .page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-header > .button {
    width: 100%;
  }

  .page-heading {
    width: 100%;
  }

  .page-heading h1 {
    font-size: 24px;
  }

  .catalog-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .search-field,
  .filter-control,
  .clear-button {
    width: 100%;
    min-width: 0;
    flex-basis: 100%;
  }

  .filter-control .filter-button {
    width: 100%;
  }

  .filter-popover,
  .filter-popover-align-end {
    right: 0;
    left: 0;
    width: 100%;
  }

  .trust-note,
  .trust-note p {
    align-items: flex-start;
  }

  .trust-note p {
    flex-direction: column;
    gap: 2px;
  }

  .catalog-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .view-toggle {
    margin-left: auto;
  }

  .material-grid {
    padding: 10px;
  }

  .material-list-row {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-areas:
      "swatch identity detail"
      "swatch type detail"
      "swatch trust detail"
      "swatch calibrator detail"
      "swatch revision detail"
      "swatch channel detail";
    align-items: start;
  }

  .material-list-row .material-swatch {
    grid-area: swatch;
  }

  .material-list-row .material-identity {
    grid-area: identity;
  }

  .material-list-row .list-material-type {
    grid-area: type;
  }

  .material-list-row .list-trust {
    grid-area: trust;
  }

  .material-list-row .list-calibrator {
    grid-area: calibrator;
  }

  .material-list-row .material-revision {
    grid-area: revision;
  }

  .material-list-row > .badge-channel {
    grid-area: channel;
    justify-self: start;
  }

  .material-list-row .detail-button {
    grid-area: detail;
  }

  .material-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-row-wide {
    grid-column: auto;
  }

  .catalog-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .pagination-controls {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .pagination-controls > span {
    min-width: 0;
    flex: 1 1 220px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .dialog-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .dialog-actions .button {
    width: 100%;
  }

  .contribution-stepper {
    padding: 10px;
  }

  .contribution-stepper li {
    gap: 4px;
    font-size: 10px;
  }

  .contribution-stepper li:not(:last-child)::after {
    display: none;
  }

  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel-heading,
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-heading .button {
    width: 100%;
  }

  .wizard-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .wizard-actions .button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .contribution-stepper {
    grid-template-columns: minmax(0, 1fr);
  }

  .contribution-stepper li {
    min-height: 40px;
    justify-content: flex-start;
  }

  .review-summary div,
  .submission-card dl > div,
  .submission-summary dl > div,
  .shared-summary-card dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
}

@media (max-width: 399px) {
  .catalog-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    width: min(var(--sidebar-width), calc(100vw - 40px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .nav-item,
  .view-toggle .icon-button,
  .material-card,
  .material-type-card {
    transition: none;
  }

  .radio-card {
    transition: none;
  }

  .skeleton-block,
  #catalog-page:not([hidden]),
  .brand-page:not([hidden]),
  .directory-page:not([hidden]),
  .material-grid > .material-card,
  .directory-card-grid > .material-type-card,
  .dialog[open] .dialog-surface {
    animation: none;
  }
}

@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight;
    box-shadow: none;
  }

  .official-marker,
  .badge {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    forced-color-adjust: auto;
  }

  .icon {
    color: CanvasText;
    stroke: CanvasText;
    forced-color-adjust: auto;
  }

  .button-primary,
  .nav-item.is-active,
  .view-toggle .icon-button[aria-pressed="true"] {
    border-color: Highlight;
    background: Canvas;
    color: LinkText;
  }
}

@media (max-width: 935px) {
  .governance-filters, .governance-layout { grid-template-columns: 1fr; }
  .governance-review-layout { grid-template-columns: minmax(0, 1fr); }
  .governance-decision-aside { position: static; }
  .governance-review-header { flex-direction: column; }
  .table-shell { overflow: visible; border: 0; background: transparent; }
  .governance-table, .governance-table tbody, .governance-table tr, .governance-table td { display: block; width: 100%; }
  .governance-table thead { display: none; }
  .governance-table tr { margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); padding: 10px 12px; }
  .governance-table td { display: grid; grid-template-columns: minmax(88px, .35fr) minmax(0, 1fr); gap: 8px; border: 0; padding: 6px 0; }
  .governance-table td::before { content: attr(data-label); color: var(--muted); font-size: 11px; font-weight: 700; }
}

@media (forced-colors: active) {
  .governance-table tr, .governance-stat, .publication-card, .official-record, .legacy-candidate { border-color: CanvasText; }
}
