/* ONYX client-screen refinements layered after the shared Morrell language. */
.card h2 { flex-wrap: wrap; }
.cardtabs { flex-wrap: wrap; justify-content: flex-end; }
.tablewrap,
.tracklayout .card > div[style*="overflow-x:auto"] {
  scrollbar-color: var(--rule-2) transparent;
  scrollbar-width: thin;
}

@media (max-width: 880px) {
  .brand { flex: 0 0 100%; }
  .brand .name { padding-left: 2px; }
  .sidenav a { padding: 7px 9px; gap: 8px; font-size: 12.5px; }
  .sidenav a.active::before { width: 4px; height: 4px; flex-basis: 4px; }
  .pagehead { display: block; }
  .pagehead > :last-child:not(:first-child) { margin-top: 14px; }
  .cardtabs {
    width: 100%; margin: 8px 0 0; justify-content: flex-start;
    overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px;
  }
  .cardtabs button { flex: 0 0 auto; }
  .fstage { grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
  .fstage .fl { font-size: 12px; }
  .fstage .fconv { grid-column: 2; padding-left: 4px; }
  .fstage .fbarwrap { height: 27px; }
  .donutwrap { align-items: flex-start; }
  .donut { width: 124px; height: 124px; }
  #view-tracking .card[style*="padding:0"] { overflow: hidden; }
  #view-tracking table { min-width: 690px; }
  #view-tracking .hide-sm { display: none; }
  #view-map .card { padding: 6px !important; }
  #mapsvg { height: min(620px, 72vh) !important; }
}

@media (max-width: 430px) {
  .wrap { padding-right: 10px; padding-left: 10px; }
  .stats { gap: 10px; }
  .stat { padding: 16px 18px 13px; }
  .grid2 { gap: 10px; }
  .donutwrap { gap: 10px; }
  .legend { gap: 8px 12px; }
}