@media (max-width: 1180px) {
  .tree-command-row.catalog-controls {
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 15rem) minmax(8rem, 11rem) auto;
  }

  .command-brand {
    grid-column: 1 / -1;
  }

  .technology-lane-headings,
  .technology-columns {
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 24%);
  }

  .tree-command .inline-filter-groups { grid-template-columns: 1fr; }
  .tree-command .inline-filter-section:nth-child(2) { grid-template-columns: minmax(28rem, 1fr) minmax(13rem, .55fr); }
  .tree-command .inline-filter-section:nth-child(2) .filter-section-title { grid-column: auto; }
  .tree-command .technology-range-fields { margin-top: .35rem; }
}

@media (max-width: 780px) {
  .tree-command {
    position: relative;
    top: auto;
    margin-top: .45rem;
  }

  .tree-command-row.catalog-controls {
    grid-template-columns: minmax(0, 1fr) 1fr;
  }

  .command-brand,
  .technology-search-control,
  .tree-command-row .clear-button {
    grid-column: 1 / -1;
  }

  .technology-lane-headings {
    display: none;
  }

  .level-section {
    display: grid;
    padding: .65rem 0 .8rem;
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .level-rail {
    display: block;
    min-height: 0;
  }

  .level-rail::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: auto;
    background: linear-gradient(to bottom, rgba(0, 232, 248, .12), var(--pal-cyan), rgba(0, 232, 248, .12));
    transform: translateX(-50%);
  }

  .level-marker {
    position: sticky;
    top: var(--technology-sticky-command-top);
    width: 2.55rem;
    height: 2.55rem;
    margin: 3.1rem auto 0;
    font-size: .85rem;
  }

  .technology-columns,
  .level-section--regular-only .technology-columns,
  .level-section--ancient-only .technology-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .technology-lane {
    min-height: 0;
  }

  .technology-lane::before {
    display: block;
    margin: -.65rem -.65rem .65rem;
    padding: .35rem .6rem;
    color: #fff;
    background: var(--pal-teal);
    content: "Technology";
    font-size: .72rem;
    font-weight: 700;
  }

  .technology-lane--ancient::before {
    background: var(--pal-ancient);
    content: "Ancient technology";
  }

  .technology-grid,
  .technology-grid--ancient {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  main {
    width: min(calc(100% - .5rem), 1680px);
  }

  .tree-command-row.catalog-controls {
    grid-template-columns: 1fr;
  }

  .technology-search-control {
    grid-column: auto;
  }

  .level-section {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .level-marker {
    width: 2.15rem;
    height: 2.15rem;
    margin-inline: auto;
  }

  .technology-grid,
  .technology-grid--ancient {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tech-card {
    min-height: 10.9rem;
    grid-template-rows: 6.65rem minmax(2.3rem, auto) 1.7rem;
  }

  .tech-media img {
    width: 5rem;
    height: 5rem;
  }

  .info-summary {
    grid-template-columns: 5.25rem minmax(0, 1fr);
    gap: .65rem;
    padding: .55rem;
  }

  .info-summary > img {
    width: 5.25rem;
    height: 5.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tech-card {
    transition: none;
  }
}

@media (max-width: 1080px) {
  .tree-command .inline-filter-section:nth-child(2) { grid-template-columns: 1fr; }
  .tree-command .inline-filter-section:nth-child(2) .filter-section-title { grid-column: auto; }
  .tree-command .technology-range-fields { margin-top: .35rem; }
}

@media (max-width: 780px) {
  .tree-command .catalog-controls--atlas { grid-template-columns: 1fr; }
  .tree-command .inline-filter-groups { grid-template-columns: 1fr; }
  .tree-command .technology-level-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .tree-command .technology-level-control { height: auto; grid-template-columns: 1fr; }
  .tree-command .level-picker-trigger,
  .tree-command .atlas-reset { width: 100%; }
  .tree-command .technology-type-filters,
  .tree-command .technology-level-filters { grid-template-columns: 1fr; }
}
