/* Give small landscape viewports the full map quickly while keeping node names visible. */
@media (min-width: 901px) and (max-width: 1100px) {
  .current-arbitration-wrap { display: none; }
  .user-controls { display: flex; }
}

@media (max-width: 480px) {
  :root { --topbar-offset: 94px; }
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px 42px;
    grid-template-areas: "brand menu controls" "navigation navigation navigation";
    align-items: center;
    row-gap: 0;
    width: 100%;
    max-width: 100%;
    padding: 0 4px;
  }
  .brand { grid-area: brand; min-width: 0; padding: 4px 4px 4px 8px; }
  .mobile-menu-btn { grid-area: menu; width: 40px; min-height: 48px; padding-inline: 8px; }
  .topbar-controls { grid-area: controls; justify-content: center; width: 42px; min-height: 48px; margin-left: 0; }
  .mobile-topbar-actions { justify-content: center; width: 100%; }
  .guide-tab-links {
    grid-area: navigation;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
    min-width: 0;
    padding: 0 4px 5px;
    overflow: visible;
  }
  .guide-tab-link {
    justify-content: center;
    min-width: 0;
    min-height: 36px;
    padding: 5px 2px;
    font-size: clamp(9px, 2.8vw, 11px);
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
  }
  .mobile-search-toggle { width: 42px; min-height: 48px; flex: 0 0 42px; padding: 0; }
}

@media (max-width: 400px) and (max-height: 700px) and (orientation: portrait) {
  .main { padding: 12px 10px 36px; }
  .ts-title { margin-bottom: 2px; font-size: 1.45em; line-height: 1.2; }
  .ts-meta-row { margin-bottom: 4px; }
  .node-chips { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px 6px; margin-bottom: 6px; }
  .node-chips .node-meta { display: none; }
  .asset-disclaimer {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 0 0 7px;
    font-size: 11px;
    line-height: 1.35;
  }
  .viewport { margin-bottom: 16px; }
}

@media (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) {
  .main { padding: 8px 12px 28px; }
  .ts-title { margin-bottom: 2px; font-size: 1.35em; line-height: 1.2; }
  .ts-meta-row { gap: 4px 8px; margin-bottom: 4px; }
  .ts-sub { font-size: 12px; line-height: 1.35; }
  .node-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 0 5px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .node-chips > span { flex: 0 0 auto; }
  .node-chips .node-meta { display: none; }
  .asset-disclaimer {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0 0 6px;
    font-size: 10px;
    line-height: 1.35;
  }
  .viewport { margin-bottom: 16px; }
}

@media (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) and (prefers-reduced-motion: reduce) {
  .sidebar,
  .mobile-sidebar-backdrop { transition: none !important; }
}